JS--hashchange事件--使用/教程

太过爱你忘了你带给我的痛 2023-09-29 16:53 4阅读 0赞

原文网址：[JS--hashchange事件--使用/教程\_IT利刃出鞘的博客-CSDN博客][JS--hashchange_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍hashchange事件的用法。

hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。

URL的片段标识符（URL 中 \# 后面的部分）改变时会触发 hashchange 事件。

**官网网址**

[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/hashchange\_event][https_developer.mozilla.org_zh-CN_docs_Web_API_Window_hashchange_event]

## 概述 ##

<table style="width:483px;"> 
 <tbody> 
 <tr> 
 <td style="width:119px;"> 属性 </td> 
 <td style="width:107px;"> 值 </td> 
 <td style="width:256px;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="width:119px;"> bubbles </td> 
 <td style="width:107px;"> true </td> 
 <td style="width:256px;"> 事件能冒泡 </td> 
 </tr> 
 <tr> 
 <td style="width:119px;"> cancelable </td> 
 <td style="width:107px;"> false </td> 
 <td style="width:256px;"> 事件不能被取消 </td> 
 </tr> 
 <tr> 
 <td style="width:119px;"> oldURL </td> 
 <td style="width:107px;"> String </td> 
 <td style="width:256px;"> 跳转前的URL </td> 
 </tr> 
 <tr> 
 <td style="width:119px;"> newURL </td> 
 <td style="width:107px;"> String </td> 
 <td style="width:256px;"> 跳转后的当前URL </td> 
 </tr> 
 </tbody> 
</table>

## 代码示例 ##

### 示例1：addEventListener ###

window.addEventListener('hashchange', function() {
      console.log('The hash has changed!')
    }, false);

### 示例2：onhashchange ###

function locationHashChanged() {
      if (location.hash === '#cool-feature') {
        console.log("You're visiting a cool feature!");
      }
    }
    
    window.onhashchange = locationHashChanged;

[JS--hashchange_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126146926
[https_developer.mozilla.org_zh-CN_docs_Web_API_Window_hashchange_event]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/hashchange_event