What is HTML DOM HashChangeEvent?

In this article, we will learn HTML DOM HashChangeEvent,This free HTML tutorial for complete beginners will help you learn HTML from scratch.

HTML DOM HashChangeEvent

HTML DOM Italic Object

HTML DOM removeAttributeNode() Method

The HashChangeEvent in HTML DOM is an interface between the events that are triggered when the hash of the URL has been changed. The anchor part of the URL follows the # symbol.

Supported Tags

<body>

Properties/Methods:

newURL: This property is used to return the URL of the document after the fragment identifier has been changed.

Syntax:

event.newURL

oldURL: This property is used to return the URL of the document before the hash (anchor part) changes.

Syntax:

event.oldURL

onhashchange Event: This property occurred when there have been changes to the hash of the current URL.

Syntax:

<element onhashchange = "script">

Example 1: In this example, we will use the DOM HashChangeEvent.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM HashChangeEvent
    </title>
</head>
   
<body onhashchange="GFG(event)">
    <h3>
        Click on the button to see the change in URL
    </h3>
    <button onclick="Beginner()">
        Change
    </button>
    <p id="sudo"></p>
    <script>
        // Use location.hash property to
        // change the anchor part
        function Beginner() {
            location.hash = "#w3wiki";
        }
        function GFG() {
            document.getElementById("sudo").innerHTML
                = "<h3>Previous URL: " + event.oldURL
                + "<h3>New URL: " + event.newURL;
        }
    </script>
</body>
</html>

Output:

Example 2: In this example, we will use the DOM HashChangeEvent.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM HashChangeEvent
    </title>
</head>
   
<body onhashchange="GFG()">
    <h4>Click the button</h4>
    <button onclick="Beginner()">
        Click Here!
    </button>
    <p id="sudo"></p>
    <script>
        function Beginner() {
            location.hash = "#w3wiki";
            let x = location.hash;
            document.getElementById("sudo").innerHTML
                = "The new anchor part is: " + x;
        }
        function GFG() {
            alert("The hash has been changed!");
        }
    </script>
</body>
</html>