溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-03 13:15:24 來源：腳本之家 閱讀：121 作者：lqh 欄目：web開發(fā)

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ì)本站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手