HTML DOM HashChangeEvent
htmlweb developmentfront end technology更新于 2024/5/29 17:16:17
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>
输出
这将产生以下输出 −
点击"更改"按钮 −
在上面的例子中
我们创建了一个"更改"按钮，当用户点击该按钮时，它将执行 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;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
