HashChangeEvent ใน HTML DOM

HashChangeEvent ใน HTML DOM เป็นอินเทอร์เฟซสำหรับแทนเหตุการณ์ที่เกิดขึ้นเมื่อส่วน hash (#) ของ URL ถูกเปลี่ยนแปลง

คุณสมบัติ (Properties)

ไวยากรณ์ (Syntax)

event.propertyName

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

ตัวอย่าง

ตัวอย่างการตรวจจับการเปลี่ยนแปลง hash ของ URL:

<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>ตัวอย่าง HashChangeEvent</h1>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยน hash</p>
<button onclick="changeHash()">CHANGE</button>
<p id="Sample"></p>
<script>
  function changeHash() {
    location.hash = "NEWHASH";
  }
  
  function showChange(event) {
    document.getElementById("Sample").innerHTML = 
      "URL ถูกเปลี่ยนจาก " + event.oldURL + " เป็น " + event.newURL;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CHANGE"

เมื่อคลิกปุ่ม "CHANGE" URL จะเปลี่ยนจากเช่น https://example.com/page เป็น https://example.com/page#NEWHASH และแสดงข้อความแจ้ง URL เดิมและใหม่

คำอธิบายโค้ด

• ตั้งค่า onhashchange="showChange(event)" บน <body> เพื่อจับเหตุการณ์เปลี่ยน hash
• สร้างปุ่ม "CHANGE" เรียกใช้ changeHash() เมื่อคลิก
• changeHash() ตั้งค่า location.hash = "NEWHASH" เปลี่ยน hash ของ URL
• เมื่อ hash เปลี่ยน เหตุการณ์ onhashchange ทำงาน เรียก showChange(event) ส่ง event object เข้าไป
• showChange() ใช้ event.oldURL และ event.newURL แสดง URL ก่อนและหลังเปลี่ยนในย่อหน้า id="Sample"