JavaScript hashchange 事件

admin發表於2018-12-23
JavaScript事件

關於事件處理函式註冊，可以參閱如何註冊事件處理函式一章節。

hashchange 事件是在hash值改變時觸發，那麼首先解決hash是什麼。

可能大家知道location.hash屬性，它可以設定或者獲取URL的錨部分，也就是從#號開始的部分。

http://www.softwhy.com/ant.html#do，#do就是連結的錨部分。

當錨部分的值發生改變時，hashchange 事件就會觸發。

首先介紹一下錨點連結特點：

（1）.利用錨點連結也實現定位效果，具體參閱HTML 錨點定位一章節。

（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.softwhy.com/" /> 
<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.softwhy.com/" />
<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顯示出來。

相關閱讀：

（1）.slice方法參閱JavaScript 字串slice()一章節。

（2）.document.querySelectorAll方法參閱querySelectorAll() 方法一章節。

（3）.document.querySelector方法參閱querySelector() 方法一章節。

（4）.classList屬性參閱JavaScript classList 屬性一章節

相關文章