HTML DOM HashChangeEvent

HTML DOM HashChangeEvent 是一种类型接口，用于表示对 URL 的 # 部分进行修改时触发的事件。

属性

HashChangeEvent 的属性如下 −

属性说明
newURL在 hash 修改后返回文档 URL。
oldURL返回在 hash 更改之前的文档 URL

语法

HashChangeEvent 的语法如下。

event.eventProperty

此处，eventProperty 是上述两个属性之一。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

让我们看一个 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 次浏览

开启你的 职业生涯

完成课程获取认证

开始
广告