HTML DOM HashChangeEvent

HTML DOM HashChangeEvent เป็นประเภทของอินเทอร์เฟซที่ใช้สำหรับแสดงเหตุการณ์เหล่านั้นที่เริ่มทำงานเมื่อใดก็ตามที่ส่วน # ของ URL ได้รับการแก้ไข

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของ HashChangeEvent -

คุณสมบัติ	คำอธิบาย
newURL	หากต้องการส่งคืน URL ของเอกสารหลังจากแก้ไขแฮชแล้ว
oldURL	ส่งกลับ URL ของเอกสารก่อนที่จะเปลี่ยนแฮช

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ HashChangeEvent

event.eventProperty

ที่นี่ eventProperty เป็นหนึ่งในสองคุณสมบัติข้างต้น

ตัวอย่าง

ให้เราดูตัวอย่างของ HashChangeEvent

<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>HashChangeEvent example</h1>
<p>Change the hash by clicking the below button</p>
<button onclick="changeHash()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeHash() {
      location.hash = "NEWHASH";
   }
   function showChange() {
      document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM HashChangeEvent

เมื่อคลิกปุ่ม CHANGE -

HTML DOM HashChangeEvent

ในตัวอย่างข้างต้น

เราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด changeHash() เมื่อผู้ใช้คลิก

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

วิธี changeHash() เปลี่ยนคุณสมบัติแฮชของวัตถุตำแหน่งเป็น "NEWHASH" วัตถุตำแหน่งมีข้อมูลเกี่ยวกับ URL ของเรา -

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

ทันทีที่มีการเปลี่ยนแปลงแฮช ตัวจัดการเหตุการณ์ onhashchange ที่เชื่อมโยงกับแท็ก body จะเริ่มทำงานและส่งผ่านเหตุการณ์ haschange เป็นวัตถุไปยังฟังก์ชัน showChange() -

<body onhashchange="showChange(event)">

เมธอด showChange() ใช้เหตุการณ์ hashchange ที่ได้รับเพื่อแสดงคุณสมบัติ oldURL และคุณสมบัติ newURL ในองค์ประกอบย่อหน้าที่มี id "ตัวอย่าง" -

function showChange() {
   document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}