HTML | DOM HashChangeEvent

The HashChangeEvent is a DOM event that is triggered whenever the URL's hash value changes. This event is specific to the browser window and is not propagated to parent elements or any other frames or windows.

Listening for HashChangeEvent

To listen for HashChangeEvent, you can either use the addEventListener() method:

window.addEventListener('hashchange', (event) => {
  console.log("Hash value changed to: " + event.newURL.split("#")[1]);
});

Or you can use the onhashchange property:

window.onhashchange = (event) => {
  console.log("Hash value changed to: " + event.newURL.split("#")[1]);
};

HashChangeEvent Properties

The HashChangeEvent has the following properties:

• oldURL: A string containing the URL of the document at the time the hash value changed.
• newURL: A string containing the URL of the document after the hash value changed.

Browser Support

The HashChangeEvent is supported by all modern browsers. However, it is not supported by Internet Explorer 8 and earlier versions.

Conclusion

HashChangeEvent is a useful event that can be used to track changes made to the URL's hash value. It can be used to create dynamic web applications that respond to user actions and update the URL with the latest state of the application.