JavaScript hashchange 事件

红太狼 2020-05-27 14:00 641阅读 1赞

# JavaScript hashchange 事件

hashchange 事件是在hash值改变时触发，那么首先解决hash是什么。

可能大家知道location.hash属性，它可以设置或者获取URL的锚部分，也就是从#号开始的部分。

`http://www.dandelioncloud.cn/ant.html#do`，#do就是链接的锚部分。

当锚部分的值发生改变时，hashchange 事件就会触发。

首先介绍一下锚点链接特点：

（1）.利用锚点链接也实现定位效果。

（2）.服务器不会接收到锚点的内容。

（3）.锚点值的改变不会刷新页面，可以产生锚点定位改变效果。

触发hashchange事件主要手段主要有如下几种：

（1）.点击页面的锚点链接修改hash值。

（2）.location对象的hash和href属性重置锚点链接值。

**浏览器支持：**

（1）.IE8+浏览器支持此事件。

（2）.edge浏览器支持此事件。

（3）.火狐浏览器支持此事件。

（4）.Opera浏览器支持此事件。

（5）.谷歌浏览器支持此事件。

（6）.safria浏览器支持此事件。

下面通过代码实例演示一下如何触发hashchange事件。

此事件也有很强的实际应用价值，文章的最后会给出一个利用此事件实现的选项卡效果。

**代码实例：**

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css">  
a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:50px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#ant{
  width:100%;
  height:50px;
  line-height:50px;
  text-align:center;
  background:#CCC;
  margin-top:300px;
}
</style>
<script>
window.onhashchange = function () {
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "蒲公英云";
}
</script>
</head>
<body style="height:1200px;">
  <a href="#ant">点击定位</a>
  <div id="ant"></div>
</body>
</html>
```

代码分析如下：

（1）.点击链接后，能够触发事件，因为链接的锚点（hash）发生改变，观察地址栏。

（2）.第一次点击后，需要手动删除地址栏中的锚点，进行下一次测试，否则无法演示效果。

上面仅仅是演示了hashchange事件触发的一个场景，其实利用此事件可以进行一些遍历的操作。

主要基于如下几点：

（1）.hash值的修改不会刷新页面。

（2）.可以通过一些对象属性获取新的hash值。

（3）.当hansh值改变时，利用hashchange事件处理函数达成我们的目标。

下面看一个选项卡切换实例：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
*{
  margin:0; 
  padding:0;
}
a{
  text-decoration: none;
  color:#fff;
}
.task-list{
  list-style: none;
  overflow: hidden;
  width: 500px;
  margin:auto;
  padding: 10px;
  border:1px solid #DCDCDC;
  border-bottom:none;
  background: #2aabd2;
}
.task-list li{
   float: left;
   margin-right: 30px;
}
.task-list li>a{
  padding:10px 15px;
}
.task-content{
  width: 500px;
  margin:auto;
  height:100px;
  padding: 10px;
  border:1px solid #DCDCDC;
}
.task-content div{
   display: none;
   padding: 15px;
}
.task-content div.active{
  display: block;
}
</style>
<script>
let hashStr;
function watchHash(){
  let hash = window.location.hash.slice(1);
  hashStr = hash;
  if(hashStr){
    let divList=document.querySelectorAll(".task-content div");
    let odiv=document.querySelector("#"+hashStr);
    for(let index=0;index<divList.length;index++){
      divList[index].classList.remove("active");
    }
    odiv.classList.add("active");
  }
}
window.onload=function(){
  watchHash();
  addEventListener("hashchange",watchHash);
}
</script>
</head>
<body>
<ul class="task-list">
  <li><a href="#one">标题一</a></li>
  <li><a href="#two">标题二</a></li>
  <li><a href="#tree">标题三</a></li>
</ul>
<div class="task-content">
  <div id="one" class="active">蒲公英云一</div>
  <div id="two">蒲公英云二</div>
  <div id="tree">蒲公英云三</div>
</div>
</body>
</html>
```

上述代码利用hashchange事件实现了选项卡切换效果，下面简单介绍一下实现原理。

（1）.默认只有第一个选项卡内容是显示的。

（2）.标题链接的href的恰好与它相关联的内容div的id属性值相对应。

（2）.点击标题会修改url的hash值，那么就会触发hashchange事件。

（3）.事件处理函数获取新的hash值，通过此值获取将要显示的内容div。

（4）.通过for循环首先将所有的内容div隐藏，然后再将应该显示的div显示出来。