JavaScript Window hashchange Event: The Complete Guide

JavaScript provides various events to enhance the interactivity and functionality of web pages. One such essential event is the hashchange event. This guide will explain everything you need to know about the hashchange event. We’ll cover what it is, why it’s useful, where to use it, how to implement it, and when it comes into play. Let’s dive in!

What is the hashchange Event?

The hashchange event in JavaScript is fired when the fragment identifier of the URL (the part after the # symbol) has changed. This event is crucial for handling scenarios where you need to perform actions based on changes in the URL hash.

Why Use the hashchange Event?

Using the hashchange event is beneficial because it allows you to manage the state of your application based on changes in the URL. This can be useful for creating single-page applications (SPAs), updating the user interface, or performing actions when specific hash values are detected. It enhances the user experience by enabling seamless navigation and interaction.

Where Can You Use the hashchange Event?

You can use the hashchange event on the window object to detect changes in the URL hash. This event is particularly useful in web applications that need to handle URL-based navigation and perform actions accordingly.

How to Use the hashchange Event

Let’s dive into some examples to see how the hashchange event works in different scenarios.

Basic Example

Here’s a simple example to show how the hashchange event works with the window object.

<a href="#section1">Go to Section 1</a> |
<a href="#section2">Go to Section 2</a>
<p id="status">Current hash: None ⏳</p>

  function updateHash() {
    document.getElementById("status").textContent = `Current hash: ${location.hash} πŸš€`;

  window.addEventListener("hashchange", updateHash);
  updateHash(); // Initial call to set the status on page load

In this example, the status message updates to show the current hash value whenever the URL hash changes.

Example with Navigation

Let’s see how the hashchange event can be used to handle navigation within a single-page application.

  .section {
    display: none;
  .active {
    display: block;
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
<div id="home" class="section active">Welcome to the Home Page 🏠</div>
<div id="about" class="section">Learn more About Us πŸ“–</div>
<div id="contact" class="section">Get in Touch with Us πŸ“ž</div>

  function navigate() {
    const sections = document.querySelectorAll(".section");
    sections.forEach((section) => section.classList.remove("active"));

    const hash = location.hash || "#home";
    const target = document.querySelector(hash);
    if (target) {

  window.addEventListener("hashchange", navigate);
  navigate(); // Initial call to set the correct section on page load

In this example, navigation links update the displayed content based on the URL hash.

Example with Dynamic Content Loading

Let’s see how the hashchange event can be used to load content dynamically based on the hash value.

  <a href="#section1">Load Section 1</a>
  <a href="#section2">Load Section 2</a>
<div id="content">Content will be loaded here ⏳</div>

  function loadContent() {
    const content = document.getElementById("content");
    switch (location.hash) {
      case "#section1":
        content.textContent = "This is Section 1 πŸ“‚";
      case "#section2":
        content.textContent = "This is Section 2 πŸ“‚";
        content.textContent = "Content will be loaded here ⏳";

  window.addEventListener("hashchange", loadContent);
  loadContent(); // Initial call to set the content on page load

In this example, content is loaded dynamically based on the URL hash value.

When to Use the hashchange Event

The hashchange event is particularly useful in scenarios where:

  • You need to perform actions based on changes in the URL hash.
  • You want to manage states in single-page applications.
  • You need to update the user interface based on navigation actions.

Comparing hashchange with Other Events

To understand the hashchange event better, let’s compare it with other common events like popstate and DOMContentLoaded.

EventDescriptionExample Usage
hashchangeFired when the fragment identifier of the URL has changedHandle hash-based navigation, update content
popstateFired when the active history entry changesManage state, update UI, handle navigation
DOMContentLoadedFired when the initial HTML document has been completely loadedExecute scripts that manipulate the DOM

Code Examples of Different Events

Here’s how you can use some of these events in your code:

<p id="hashchangeStatus">Hashchange status: Waiting ⏳</p>
<p id="popstateStatus">Popstate status: Waiting ⏳</p>
<p id="domStatus">DOM status: Waiting ⏳</p>

  window.addEventListener("hashchange", () => {
    document.getElementById("hashchangeStatus").textContent = `Hashchange status: Hash changed to ${location.hash} πŸ“›`;

  window.addEventListener("popstate", (event) => {
    document.getElementById("popstateStatus").textContent = `Popstate status: State changed to ${event.state} πŸ”„`;

  document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("domStatus").textContent = "DOM status: Content loaded! 🌟";


The hashchange event in JavaScript is a powerful tool for handling actions based on changes in the URL hash. By understanding and using this event, you can create more interactive and user-friendly web applications. Whether you are managing states in single-page applications, updating the user interface, or loading content dynamically, the hashchange event helps you ensure that your applications work smoothly and effectively.


  • What: The hashchange event fires when the fragment identifier of the URL has changed.
  • Why: It helps in handling hash-based navigation, updating content, and managing states in single-page applications.
  • Where: Use it on the window object to detect changes in the URL hash.
  • How: By adding an event listener for hashchange and handling the necessary actions.
  • When: Use it whenever you need to manage actions triggered by changes in the URL hash to improve user experience.

Feel free to use the examples provided and modify them to suit your needs. Happy coding! πŸŽ‰

What are JavaScript Browser Events?

JavaScript browser events are key to creating interactive web applications. These events are actions or occurrences detected by the browser, such as user interactions, document changes, or window modifications. By responding to events like clicks, key presses, and form submissions, developers can enhance user experience and functionality.

This comprehensive list of JavaScript browser events is a valuable reference for developers. It covers a wide range of events, from mouse and keyboard actions to document and window changes. Understanding and handling these events is essential for building responsive and engaging web applications, ensuring a seamless and intuitive user experience.

See List of all JavaScript Browser Events – Cheat Sheet

Leave a Reply