JS 中的事件冒泡與捕獲

zdmw6298 8年前發布 | 7K 次閱讀 JavaScript開發 JavaScript

剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數來解決實際的問題，不會想到去一探究竟。

漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的，JQuery 里面很多函數和思路，是千百開源工作者長期的貢獻，哪能是短時間就能消化的了。

最近再次碰到 addEventListener 函數，由于之前并沒有弄懂第三個參數的含義，要么默認值，要么手動設置成 false。這次看了不少文章，徹底把事件冒泡和捕獲弄懂。

什么事件冒泡與捕獲

事件冒泡與捕獲是 DOM 中事件傳播的兩種方式，比如說對于注冊了相同事件的兩個 DOM 元素(簡單點就是兩個 div，一里一外)，當點擊里層 div 的時候，這兩個事件誰先執行。

冒泡事件，由里向外，最里層的元素先執行，然后冒泡到外層。

捕獲事件，由外向里，最外層的元素先執行，然后傳遞到內部。

在 IE 9 之前是只支持事件冒泡，IE 9(包括 IE 9) 之后和目前主流的瀏覽器都同時支持兩種事件。

如何設置，只需修改 addEventListener 的第三個參數，true 為捕獲，false 為冒泡，默認為冒泡。

舉個簡單的例子，

<div>
  <span class="out">
    <span class="in"></span>
  </span>
</div>
<script type="text/javascript">
  var dom_out = document.getElementsByClassName('out')[0];
  var dom_in = document.getElementsByClassName('in')[0];
  dom_out.addEventListener('click',function(){
    alert('out');
  },false);
  dom_in.addEventListener('click',function(){
    alert('in');
  },false);
</script>

out in

在上面這個例子中，事件是按照冒泡來執行的，點擊里層的 in ，會看到先 alert 的順序是先 “in” 后 “out”，如果把事件改成捕獲， alert 的順序又不一樣了。

<script type="text/javascript">
  var dom_out = document.getElementsByClassName('out')[0];
  var dom_in = document.getElementsByClassName('in')[0];
  dom_out.addEventListener('click',function(){
    alert('out');
  },true);
  dom_in.addEventListener('click',function(){
    alert('in');
  },true);
</script>

out2 in2

上面這個例子是捕獲事件的例子，點擊 in 效果是不是不一樣呢？

之所以會有冒泡和捕獲事件(像 IE 9 之前的瀏覽器不支持捕獲事件，還真是反程序員)，畢竟在實際中處理事情肯定有個先后順序，要么由里向外，要么由外向里，兩者都是必須的。

但有時候為了兼容 IE 9 以下版本的瀏覽器，都會把第三個參數設置成 false 或者默認(默認就是 false)。

進一步理解冒泡和捕獲

現在已經說清楚冒泡和捕獲，那么如果同時出現冒泡和捕獲會出現什么結果？

原來瀏覽器處理時間分為兩個階段，捕獲階段和冒泡階段，

先執行捕獲階段，如果事件是在捕獲階段執行的(true 情況)，則執行；
然后是冒泡階段，如果事件是在冒泡階段執行的(false 情況)，則執行；

來看一看例子就知道了：

<div>
  <span class="s1">s1
    <span class="s2">s2
      <span class="s3">s3
      </span>
    </span>
  </span>
</div>

這次我們設置三個 span，分別是 s1, s2, s3，然后設置 s1，s3 為冒泡執行，s2 為捕獲執行：

<script type="text/javascript">
  var s1 = document.getElementsByClassName('s1')[0];
  var s2 = document.getElementsByClassName('s2')[0];
  var s3 = document.getElementsByClassName('s3')[0];
  s1.addEventListener('click',function(){
    alert('s1');
  },false);
  s2.addEventListener('click',function(){
    alert('s2');
  },true);
  s3.addEventListener('click',function(){
    alert('s3');
  },false);
</script>

s1 s2 s3

從運行的效果來看，點擊 s3，依次 alert s2 => s3 => s1，說明：

捕獲事件和冒泡事件同時存在的，而且捕獲事件先執行，冒泡事件后執行；
如果元素存在事件且事件的執行時間與當前邏輯一致(冒泡或捕獲)，則執行。

默認事件取消與停止冒泡

當然，有時候我們只想執行最內層或最外層的事件，根據內外層關系來把范圍更廣的事件取消掉(對于新手來說，不取消冒泡，很容易中招的出現 bug)。 event.stopPropagation() (IE 中 window.event.cancelBubble = true )可以用來取消事件冒泡。

有時候對于瀏覽器的默認事件也需要取消，這時候用到的函數則是 event.preventDefault() (IE 中 window.event.returnValue = false )。

那么默認事件取消和停止冒泡有什么區別呢？我的理解：瀏覽器的默認事件是指瀏覽器自己的事件(這不廢話嗎)，比如 a 標簽的點擊，表單的提交等，取消掉就不會執行啦；冒泡則取消的是由外向里(捕獲)、由里向外(冒泡)，stop 之后，就不會繼續遍歷了。stackoverflow 上的解答

看下例子，依舊是上面那個例子，不過每個函數都加了停止冒泡：

s1.addEventListener('click',function(e){
  e.stopPropagation();
  alert('s1');
},false);
s2.addEventListener('click',function(e){
  e.stopPropagation();
  alert('s2');
},true);
s3.addEventListener('click',function(e){
  e.stopPropagation();
  alert('s3');
},false);

s1 s2 s3

點擊的結果是：當點擊 s2 或 s3 的時候，都會 alert s2，點擊 s1，彈出 s1。因為事件被取消的緣故，點擊 s3，執行 s2后就不會在向下執行了。

在看一個 preventDefault 的例子。

<div>
  <a href="/">點我回主頁</a>
</div>
<div>
  <a href="/" class="back">點我不回主頁</a>
</div>
<script type="text/javascript">
  var back = document.getElementsByClassName('back')[0];
  back.addEventListener('click', function(e){
    e.preventDefault();
  });
</script>

第二個鏈接是不是回不了主頁，因為瀏覽器的默認事件被取消了。

以上所有例子請在非低版本 IE 瀏覽器的環境下瀏覽

總結

總結就補充兩個兼容 IE 的函數吧：

function stopBubble(e) {
  //如果提供了事件對象，則這是一個非IE瀏覽器
  if ( e && e.stopPropagation )
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
  else
      //否則，我們需要使用IE的方式來取消事件冒泡
      window.event.cancelBubble = true;
}
//阻止瀏覽器的默認行為
function stopDefault( e ) {
  //阻止默認瀏覽器動作(W3C)
  if ( e && e.preventDefault )
      e.preventDefault();
  //IE中阻止函數器默認動作的方式
  else
      window.event.returnValue = false;
  return false;
}

來自：http://yuren.space/blog/2016/10/16/事件冒泡與捕獲/

本文由用戶 zdmw6298 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1476777062407.html

JavaScript開發 JavaScript

JS 中的事件冒泡與捕獲

什么事件冒泡與捕獲

進一步理解冒泡和捕獲

默認事件取消與停止冒泡

總結

相關經驗

相關資訊

相關文檔

目錄