hashchange

About

The hashchange event is triggered whenever the URL's hash value changes. The hash value is the portion of a URL that follows the # symbol, and it is commonly used in applications to create dynamic, client-side navigation. When the hash value changes, the hashchange event is triggered on the window object, allowing JavaScript code to respond to the change.

The hashchange event is useful for creating single-page applications (SPAs) that rely on dynamic content loading and client-side routing. By updating the hash value in the URL, the application can maintain a history of user actions without requiring a full page reload. This allows for a more seamless and responsive user experience.

Event listener

To use the hashchange event, you can attach an event listener to the window object, like this:

HTML

JavaScript

Here, we're attaching an event listener to the window object to listen for the hashchange event. When the event is triggered (e.g. when the user clicks on the link with href="#section1"), the function inside the event listener will execute.

Inside the function, we're getting the hash from the URL using window.location.hash. We're then updating the content of the <div> element with the ID "content" based on the value of the hash.

Note that this is just a simple example - in a real application, you would likely have more complex logic for updating the content based on the hash.

Property

Here's an example of using the onhashchange property with a function assigned to it:

Here, we retrieve the element with the ID "myElement" using the getElementById method. We then assign a function to the onhashchange property of the element.

The function takes an event parameter, which contains information about the event that triggered the hash change. We log a message to the console indicating that the hash value of the URL has changed, along with the new hash value retrieved using the window.location.hash property.

Inline

It is also possible to use the hashchange event inline by using the onhashchange attribute, like this:

Here, the myFunction() function will be executed whenever the user clicks on the link and the URL hash changes.

However, it is generally better to use a separate event listener rather than inline event handlers, as it keeps your HTML code clean and separates the behaviour from the markup.

Programmatic trigger

There is ahashchange() method that can be used to trigger the hashchange event programmatically. This method allows you to simulate a hash change, which can be useful for testing or for updating the URL hash based on user interaction within your application.

To use the hashchange() method, you can call it on the window object, like this:

When you call this method, it will trigger the hashchange event, just as if the user had changed the URL hash manually. Any event listeners that are attached to the hashchange event will be executed.

For example, suppose you have an event listener for the hashchange event that updates the content of your page based on the new hash value. You could trigger this event programmatically like this:

This code sets the URL hash to "#section1" and then creates a new Event object for the hashchange event, which is then dispatched using the dispatchEvent() method. This will trigger the event listener for the hashchange event and update the content of your page based on the new hash value.