在DOM上同時繫結兩個點選事件（一個用捕獲，一個用冒泡），事件總共會執行幾次，先執行哪個事件？

王铁柱6發表於2024-12-05
事件

在DOM上同時繫結兩個點選事件，一個使用捕獲，一個使用冒泡，事件總共會執行兩次。

執行順序：

  1. 捕獲階段的事件先執行。 當事件發生在目標元素的祖先元素上時，捕獲階段的監聽器會先被觸發，一路向下傳遞到目標元素。

  2. 冒泡階段的事件後執行。 事件在目標元素上觸發後，會沿著DOM樹向上冒泡，依次觸發祖先元素上繫結的冒泡階段監聽器。

示例：

假設HTML結構如下:

<div id="outer">
  <button id="inner">Click Me</button>
</div>

JavaScript程式碼如下：

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

// 捕獲階段監聽器
outer.addEventListener('click', function(event) {
  console.log('outer capture');
}, true); // true表示捕獲階段

// 冒泡階段監聽器
inner.addEventListener('click', function(event) {
  console.log('inner bubble');
}, false); // false或省略表示冒泡階段


// 冒泡階段監聽器
outer.addEventListener('click', function(event) {
  console.log('outer bubble');
}); // 省略第三個引數，預設為冒泡階段

當你點選按鈕時，控制檯會輸出：

outer capture
inner bubble
outer bubble

總結：

即使事件處理函式繫結在同一個元素上，捕獲階段的事件總是先於冒泡階段的事件執行。如果事件處理函式繫結在不同的祖先元素上，則按照DOM樹的層級關係，從外到內執行捕獲，從內到外執行冒泡。

相關文章