HTML DOM HashChangeEvent

HTML DOM HashChangeEvent एक प्रकार का इंटरफ़ेस है जिसका उपयोग उन इवेंट्स को दर्शाने के लिए किया जाता है जो तब फायर होते हैं जब URL का # भाग संशोधित हो जाता है।

गुण (Properties)

HashChangeEvent के लिए निम्नलिखित गुण हैं:

गुण	विवरण
newURL	हैश संशोधित होने के बाद दस्तावेज़ URL को लौटाता है।
oldURL	हैश बदलने से पहले दस्तावेज़ URL को लौटाता है।

सिंटैक्स

HashChangeEvent के लिए सिंटैक्स:

event.eventProperty

यहां, eventProperty ऊपर दिए गए दो गुणों में से एक है।

उदाहरण

आइए HashChangeEvent का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <body onhashchange="showChange(event)"> 
<h1>HashChangeEvent उदाहरण</h1> 
<p>नीचे दिए गए बटन पर क्लिक करके हैश बदलें</p> 
<button onclick="changeHash()">CHANGE</button> 
<p id="Sample"></p> 
<script> 
  function changeHash() { 
    location.hash = "NEWHASH"; 
  } 
  function showChange() { 
    document.getElementById("Sample").innerHTML = "URL " + event.oldURL + " से " + event.newURL + " में बदल गया है"; 
  } 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

HTML DOM HashChangeEvent

CHANGE बटन पर क्लिक करने पर:

HTML DOM HashChangeEvent

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

हमने एक बटन CHANGE बनाया जो यूज़र द्वारा क्लिक किए जाने पर changeHash() मेथड को एक्ज़िक्यूट करता है:

<button onclick="changeHash()">CHANGE</button>

changeHash() मेथड location ऑब्जेक्ट के hash प्रॉपर्टी को "NEWHASH" में बदलता है। location ऑब्जेक्ट में हमारे URL के बारे में जानकारी होती है:

function changeHash() { 
  location.hash = "NEWHASH"; 
}

जैसे ही हैश बदलता है, body टैग से जुड़ा onhashchange इवेंट हैंडलर फायर होता है और haschange इवेंट को ऑब्जेक्ट के रूप में showChange() फंक्शन में पास करता है:

<body onhashchange="showChange(event)">

showChange() मेथड प्राप्त hashchange इवेंट का उपयोग करके oldURL प्रॉपर्टी और newURL प्रॉपर्टी को id "sample" वाले पैराग्राफ तत्व में प्रदर्शित करता है:

function showChange() { 
  document.getElementById("Sample").innerHTML = "URL " + event.oldURL + " से " + event.newURL + " में बदल गया है"; 
}