In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onhashchange

onhashchange event | hashchange event

Browser support:

8	3.6	10.6	5

Occurs when the hash subsection (begins with a '#' sign) of the current document's URL has changed.

The onhashchange event is supported in Internet Explorer from version 8, in Firefox from version 3.6, in Opera from version 10.6 and in Safari from version 5.

The onhashchange event does not fire when the document has been loaded with an initial bookmark (e.g. 'www.example.com#bookmark'). For that cases, listen the onload event and use the location.hash property.
If only the hash subsection of a page's URL changes, the page no need to be reloaded, so you cannot detect hash modifications through the onload event.

How to register:

In HTML:

8	3.6	10.6	5

In JavaScript:

object.onhashchange = handler;

8	3.6	10.6	5

object.addEventListener ("hashchange", handler, useCapture);

9	3.6	10.6	5

object.attachEvent ("onhashchange", handler);

8		10.6

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	No
Event object	Event

Actions that invoke the onhashchange event:

Clicking on a link to a bookmark anchor.
Changing the hash subsection of the current document's URL from Javascript (for example, with the hash or href property of the location object).
Navigating to the current page with a different bookmark (using the Back or Forward buttons or modifying the contents of the Location bar).

Actions that do not invoke the onhashchange event:

Loading a page with an initial bookmark.
Navigating to the current page with the current bookmark (when the hash subsection does not change).

Example HTML code 1:

This example illustrates the use of the onhashchange event:

<head>
    <script type="text/javascript">
        function OnHashChange (event) {
            var message = "The hash subsection of the document's URL has changed.\n";
            message += "The current location: " + document.location + "\n";
            message += "The current hash subsection: " + document.location.hash;

            alert (message);
        }

        function ChangeHash () {
            document.location.hash = "myBookmark";
        }
    </script>
</head>
<body onhashchange="OnHashChange (event);">
    Click on the following sections:
    <ul>
        <li><a href="#section1">1. Section</a></li>
        <li><a href="#section2">2. Section</a></li>
    </ul>

    or click on this button:
    <button onclick="ChangeHash();">Change hash from JavaScript</button>
    <br /><br />

    <b><a name="section1">1. Section</a></b><br />
    First line in the section.<br />...<br />...<br />...<br />
    Last line in the section.<br /><br />

    <b><a name="section2">2. Section</a></b><br />
    First line in the section.<br />...<br />...<br />...<br />
    Last line in the section.<br /><br />
</body>