為何事件冒泡機制會觸發兩次？

為什麼事件冒泡會連續發生兩次？

事件冒泡是web 開發中一個重要的概念，它指的是當一個事件在嵌套的HTML 元素中觸發時，事件會從最內層的元素開始一直冒泡到最外層的元素。這個過程有時會引起困惑，其中一個常見問題就是事件冒泡會連續發生兩次。

為了更好的理解為什麼事件冒泡會連續發生兩次，我們先來看一段程式碼範例：

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

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner div clicked');
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});
</script>

上述程式碼建立了一個巢狀的HTML 結構，其中包含一個最外層的<div> 元素（id="outer"），嵌套在其中的<div> 元素（id="inner"），以及一個按鈕元素（id="button"）。

在這段程式碼中，我們為每個元素添加了點擊事件監聽器，用於輸出對應元素被點擊的資訊。當我們在頁面上點擊按鈕時，我們期望的輸出結果是：

Button clicked
Inner div clicked
Outer div clicked

然而，實際上的輸出卻是：

Button clicked
Inner div clicked
Outer div clicked
Inner div clicked
Outer div clicked

可以看到，事件冒泡會連續發生兩次，導致事件處理函數重複執行。

這個問題的根本原因在於事件冒泡階段的執行順序。在冒泡階段，事件會由最內層的元素開始向外層元素冒泡，然後再逐級執行父元素的事件處理函數。因此，當我們點擊按鈕時，點擊事件會先觸發按鈕的事件處理函數，然後冒泡到巢狀的 <div> 元素上，繼續執行該元素的事件處理函數。但是，由於<div> 元素也嵌套在最外層的<div> 元素中，所以事件會再次冒泡到最外層的元素上，導致最外層的事件處理函數再次執行。

解決這個問題的方法可以有多種，以下我們來介紹兩種常用的方式：

1. #停止事件冒泡：

event.stopPropagation() 方法可以阻止事件的進一步傳播，也就是停止事件冒泡。修改上述程式碼範例的按鈕的事件處理函數如下：

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

event.stopPropagation() 方法後，事件冒泡會在按鈕元素上停止，不會再傳播到嵌套的<div> 元素和最外層的<div> 元素上。因此，事件處理函數只會執行一次，輸出的結果為：

Button clicked

監聽捕獲階段：

<div> 元素的事件處理函數如下：

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段

true 的事件監聽器，可以在擷取階段執行事件處理函數。這樣，在事件冒泡階段，事件就不會再次觸發最外層元素上的事件處理函數，從而避免了重複執行。

event.stopPropagation() 方法來阻止事件冒泡，或透過監聽擷取階段處理事件來避免重複執行。

以上是為何事件冒泡機制會觸發兩次？的詳細內容。更多資訊請關注PHP中文網其他相關文章！