HTML DOM HashChangeEvent

HTML DOM HashChangeEvent là một loại giao diện được sử dụng để đại diện cho những sự kiện kích hoạt bất cứ khi nào # phần của URL được sửa đổi.

Thuộc tính

Sau đây là các thuộc tính cho HashChangeEvent -

Thuộc tính	Mô tả
newURL	Để trả lại URL của tài liệu sau khi mã băm đã được sửa đổi.
oldURL	Để trả về URL của tài liệu trước khi thay đổi hàm băm

Cú pháp

Sau đây là cú pháp cho HashChangeEvent.

event.eventProperty

Ở đây, eventProperty là một trong hai thuộc tính trên.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM HashChangeEvent

Khi nhấp vào nút THAY ĐỔI -

HTML DOM HashChangeEvent

Trong ví dụ trên

Chúng tôi đã tạo một nút CHANGE sẽ thực thi phương thức changeHash () khi người dùng nhấp vào.

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

Phương thức changeHash () thay đổi thuộc tính băm của đối tượng vị trí thành “NEWHASH”. Đối tượng vị trí chứa thông tin về URL của chúng tôi -

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

Ngay sau khi băm được thay đổi, trình xử lý sự kiện onhashchange được liên kết với thẻ body sẽ kích hoạt và chuyển sự kiện haschange làm đối tượng cho hàm showChange () -

<body onhashchange="showChange(event)">

Phương thức showChange () sử dụng sự kiện hashchange nhận được để hiển thị thuộc tính oldURL và thuộc tính newURL trong phần tử đoạn có id “sample” -

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