Window: hashchange event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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).
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("hashchange", (event) => {});
onhashchange = (event) => {};
Event type
A HashChangeEvent
. Inherits from Event
.
Event properties
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.
Event handler aliases
In addition to the Window
interface, the event handler property onhashchange
is also available on the following targets:
Examples
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;
Specifications
Specification |
---|
HTML Standard # event-hashchange |
HTML Standard # handler-window-onhashchange |
Browser compatibility
BCD tables only load in the browser
See also
popstate
event