JavaScript 事件冒泡

admin發表於2018-11-08
JavaScript事件

JavaScript事件傳播分為兩個階段：

（1）.事件捕獲階段。

（2）.事件冒泡階段。

考慮到文章篇幅問題，本文只介紹事件冒泡。

關於事件捕獲可以參閱參閱JavaScript 事件捕獲一章節。

大家應該都見過水中的氣泡，從水底逐漸上浮到水面，事件也具有此傳遞現象。

當事件在一個元素上觸發後，事件會逐級傳播給先輩元素，這就是所謂的事件冒泡現象。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/121656nthh96clff3z5c4f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面以點選連結<a>觸發click事件為例作為一下分析：

（1）.點選連結<a>觸發click事件。

（2）.事件向上冒泡傳遞給它的父元素<p>。

（3）.然後再有<p>元素冒泡傳遞給document，再傳遞給window。

傳播過程圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/121714yqu26ccqk1dkqozk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明：並不是所有的事件都有冒泡現象，比如如下幾個：

（1）.blur事件。

（2）.focus事件。

（3）.load事件。

（4）.unload事件。

程式碼演示如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  width:150px;
  height:100px;
  background-color:blue;
}
p{
  width:120px;
  height:60px;
  background-color:green;
}
</style>  
<script>
window.onload=function(){
  let count=0;
  let obox = document.getElementById("box");
  let oshow = document.getElementById("show");
  obox.onclick = function () {
    oshow.innerHTML=++count;
  }
}
</script>
</head>
<body>
<div id="box">
  <p><a href="#" id="link">螞蟻部落</a></p>
</div>
<div id="show"></div>
</body>
</html>

程式碼分析如下：

（1）.a與p元素均未註冊click事件處理函式。

（2）.但是點選a與p元素都可以觸發div元素的click事件，這是因為事件由於事件冒泡現象，都會傳遞到div元素，於是就可以執行對應的事件處理函式。

利用事件冒泡可以實現JavaScript 委託功能，委託就是將自己的事情委託給別人去做。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
ul{
  list-style:none;
}
</style> 
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oshow=document.getElementById("show");
  let obt=document.getElementById("bt");
  obox.onclick=function(ev){
    let target=ev.target; 
    oshow.innerHTML=target.innerHTML;
  }
  obt.onclick=function(){
    let newLi=document.createElement("li");
    newLi.innerHTML="螞蟻部落五";
    obox.appendChild(newLi);
  }
}
</script>
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<input type="button" id="bt" value="新增新行"/>
</body> 
</html>

上面程式碼具有兩個主要特點：

（1）.點選li元素，會將其內容寫入頂部div中。

（2）.點選新增的li元素，也會將其內容寫入頂部div中。

如果沒有事件冒泡，想要點選li元素獲取其中的內容，需要在每一個li元素註冊事件處理函式。

現在只要將事件處理函式註冊在ul元素上即可，同樣道理，新增li元素也具有同樣的特點，否則新增li元素後，還需要為其註冊事件處理函式才能點選獲取其內容。

相關文章