The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("hashchange", (event) => {});
onhashchange = (event) => {};

A HashChangeEvent. Inherits from Event.

HashChangeEvent.newURL Read only

A string representing the new URL the window is navigating to.

HashChangeEvent.oldURL Read only

A string representing the previous URL from which the window was navigated.

In addition to the Window interface, the event handler property onhashchange is also available on the following targets:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

You can use the hashchange event in an addEventListener method:

window.addEventListener(
  "hashchange",
  () => {
    console.log("The hash has changed!");
  },
  false,
);

Or use the onhashchange event handler property:

function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;

• popstate event