Introduction
To detect the browser location hash changes in Javascript, there’s a web API event called hashchange
. Which we can rely on to detect the change in the location hash.
How to use it?
There are two options to listen to the hashchange
event:
- Attach the event (
hashchange
) to theaddEventListener
function, through any of the supported interfaces - Call the event (
onhashchange
) on any of the supported interfaces.
Supported Interfaces:
Examples
1- Using addEventListener
To detect the hash change using the addEventListener method, we’re going to attach the event to it through the Window
interface. As shown in the following example:
window.addEventListener('hashchange', function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
});
To be able to test it, we need to add a button that will update the browser location value once the user clicked on it, as shown below:
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash';
}
</script>
Then once the browser location value is updated, the hashchange
event handler will be executed, and we should be able to see the alert message.

Putting it together:
<body>
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash';
}
// Option 1
window.addEventListener('hashchange', function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
});
</script>
</body>
2- Calling the event onhashchange
The 2nd option can be done, by calling the event onhashchange
directly on any of the supported interfaces.
For example:
<body>
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash2';
}
// Option 2
window.onhashchange = function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
};
</script>
</body>
As shown above in the example, we’ve attached the onhashchange
directly to the Window
interface, and assigned it a new function implementation, which will show an alert once the browser location hash changed.
Running the above code in the browser would results in the following:

Full source code:
That’s it for How to detect location hash changes in Javascript.
Photo from Unslpash.