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

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

事件冒泡是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"），嵌套在其中的<code><div> 元素（id="inner"），以及一個按鈕元素（id="button"）。 <p>在這段程式碼中，我們為每個元素添加了點擊事件監聽器，用於輸出對應元素被點擊的資訊。當我們在頁面上點擊按鈕時，我們期望的輸出結果是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked</pre><p>然而，實際上的輸出卻是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked</pre><p>可以看到，事件冒泡會連續發生兩次，導致事件處理函數重複執行。 </p> <p>這個問題的根本原因在於事件冒泡階段的執行順序。在冒泡階段，事件會由最內層的元素開始向外層元素冒泡，然後再逐級執行父元素的事件處理函數。因此，當我們點擊按鈕時，點擊事件會先觸發按鈕的事件處理函數，然後冒泡到巢狀的 <code><div> 元素上，繼續執行該元素的事件處理函數。但是，由於<code><div> 元素也嵌套在最外層的<code><div> 元素中，所以事件會再次冒泡到最外層的元素上，導致最外層的事件處理函數再次執行。 <p>解決這個問題的方法可以有多種，以下我們來介紹兩種常用的方式：</p> <ol><li>#停止事件冒泡：</li></ol>##在在事件處理函數中呼叫<p>event.stopPropagation()<code> 方法可以阻止事件的進一步傳播，也就是停止事件冒泡。修改上述程式碼範例的按鈕的事件處理函數如下：

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

使用

event.stopPropagation() 方法後，事件冒泡會在按鈕元素上停止，不會再傳播到嵌套的

元素和最外層的

元素上。因此，事件處理函數只會執行一次，輸出的結果為：

Button clicked

監聽捕獲階段：

除了事件冒泡階段外，DOM 事件還有一個捕獲階段。捕獲階段是指事件從最外層的元素開始向內層元素傳播的過程。利用捕獲階段，可以在最外層的元素上新增事件監聽器，並在捕獲階段處理事件，然後再決定是否執行其他元素上的事件處理函數。修改上述程式碼範例的最外層

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

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

透過在最外層元素上新增參數為

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

總結起來，事件冒泡會連續發生兩次是因為事件在冒泡階段會從最內層元素一直冒泡到最外層元素，並且會執行每個元素上的事件處理函數。為了解決這個問題，我們可以使用

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