有關javascript中事件冒泡和事件捕獲機制-js教程-PHP中文網

有關javascript中事件冒泡和事件捕獲機制

巴扎黑

發布： 2017-09-02 13:30:33

原創

1736 人瀏覽過

這篇文章主要介紹了javascript 中事件冒泡和事件捕獲機制的詳解的相關資料,網上的相關資料有很多，但是講的不是多清楚，透過本文希望能讓大家理解掌握，需要的朋友可參考下方

javascript 中事件冒泡與事件擷取機制的詳解

二者作用：描述事件觸發時序問題

事件捕捉：從document到觸發事件的那個節點，即自上而下的去觸發事件---由外到內

事件冒泡：自下而上的去觸發事件---由內到外

綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲

#true,事件捕獲；false,事件冒泡

一般預設false,即事件冒泡

Jquery的e.stopPropagation會阻止冒泡，意思就是到DOM為止，祖先級的事件就不要觸發了

下面是我嘗試的例子：

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>事件冒泡与事件捕获</title> 
  <script> 
    window.onload = function () { 
      document.getElementById("parent").addEventListener("click",function(e){ 
        alert("parent事件被触发，"+this.id); 
      },true) 
      document.getElementById("child").addEventListener("click",function(e){ 
        alert("child事件被触发，"+this.id) 
      },true) 
    } 
 
  </script> 
</head> 
<body> 
<p id="parent"> 
  parent事件 
  　　<p id="child" class="child"> 
  child事件 
  </p> 
</p> 
</body> 
</html>

登入後複製

例子裡我加了第三個true，就是事件捕獲。

如果不加則是預設的事件冒泡，這時候事件觸發時序就是自內向外

以上是有關javascript中事件冒泡和事件捕獲機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！