欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 中事件冒泡和事件捕獲機(jī)制的詳解

 更新時(shí)間：2017年09月01日 15:38:40   投稿：lqh  
這篇文章主要介紹了javascript 中事件冒泡和事件捕獲機(jī)制的詳解的相關(guān)資料,網(wǎng)上的相關(guān)資料有很多，但是講的不是多清楚，通過本文希望能讓大家理解掌握，需要的朋友可以參考下

javascript 中事件冒泡和事件捕獲機(jī)制的詳解

二者作用：描述事件觸發(fā)時(shí)序問題

事件捕獲：從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)，即自上而下的去觸發(fā)事件---由外到內(nèi)

事件冒泡：自下而上的去觸發(fā)事件---由內(nèi)到外

綁定事件方法的第三個(gè)參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲

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

一般默認(rèn)false,即事件冒泡

Jquery的e.stopPropagation會(huì)阻止冒泡，意思就是到DOM為止，祖先級(jí)的事件就不要觸發(fā)了 

下面是我嘗試的例子：

 <!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事件被觸發(fā)，"+this.id); 
      },true) 
      document.getElementById("child").addEventListener("click",function(e){ 
        alert("child事件被觸發(fā)，"+this.id) 
      },true) 
    } 
 
  </script> 
</head> 
<body> 
<div id="parent"> 
  parent事件 
  　　<div id="child" class="child"> 
  child事件 
  </div> 
</div> 
</body> 
</html>

 例子里我加了第三個(gè)true，是事件捕獲。

如果不加則是默認(rèn)的事件冒泡，這時(shí)候事件觸發(fā)時(shí)序就是自內(nèi)向外

以上就是javascript 中事件冒泡和事件捕獲機(jī)制的詳解，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

相關(guān)文章

最新評(píng)論