แอตทริบิวต์เหตุการณ์ onhashchange ของ HTML

แอตทริบิวต์เหตุการณ์ onhashchange ของ HTML จะถูกกระตุ้นเมื่อมีการเปลี่ยนแปลงในส่วนแฮช (anchor) ของ URL ในเอกสาร HTML

ไวยากรณ์

ไวยากรณ์มีดังนี้ −

<tagname onhashchange="script"></tagname>

ลองดูตัวอย่างการใช้งานแอตทริบิวต์เหตุการณ์ onhashchange ของ HTML −

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;    }    .btn {       background: #db133a;       border: none;       color: #fff;       height: 2rem;       padding: 8px 10px;    } </style> </head> <body onhashchange="hashChange()"> <h1>การสาธิตแอตทริบิวต์เหตุการณ์ onhashchange ของ HTML</h1> <button class="btn" onclick="change()">ตั้งค่าแฮช</button> <p class="msg"></p> <script>    function change() {       location.hash = "newHashPart";       document.querySelector('.msg').innerHTML = 'ส่วนแฮชของ URL คือ: ' + location.hash;    }    function hashChange() {       document.body.style.background = 'lightblue';    } </script> </body> </html>

ผลลัพธ์

คลิกปุ่ม ตั้งค่าแฮช เพื่อตั้งค่าแฮชใหม่ให้กับ URL ปัจจุบัน และสังเกตการทำงานของแอตทริบิวต์เหตุการณ์ onhashchange −