HTML DOM HashChangeEvent


HTML DOM HashChangeEvent 是一種型別介面,用於表示對 URL 的 # 部分進行修改時觸發的事件。

屬性

HashChangeEvent 的屬性如下 −

屬性說明
newURL在 hash 修改後返回文件 URL。
oldURL返回在 hash 更改之前的文件 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>

輸出

將產生以下輸出 −

單擊 CHANGE 按鈕 −

在上述示例中

我們建立了一個 CHANGE 按鈕,使用者單擊後將執行 changeHash() 方法。

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

changeHash() 方法將 location 物件的 hash 屬性更改為 “NEWHASH”。location 物件包含有關我們 URL 的資訊 −

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

一旦 hash 更改,與 body 標記關聯的 onhashchange 事件處理函式就會觸發,並將 haschange 事件作為物件傳遞給函式 showChange() −

<body onhashchange="showChange(event)">

showChange() 方法使用收到的 hashchange 事件在帶有 id “sample” 的段落元素中顯示 oldURL 屬性和 newURL 屬性 -

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

更新日期: 2021 年 2 月 19 日

110 次瀏覽

開啟你的 職業生涯

完成課程獲取認證

開始
廣告
© . All rights reserved.