為什么事件冒泡會連續發生兩次？
事件冒泡是 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 結構，其中包含一個最外層的 元素（id=”outer”），一個嵌套在其中的 元素（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
登錄后復制
可以看到，事件冒泡會連續發生兩次，導致事件處理函數重復執行。
這個問題的根本原因在于事件冒泡階段的執行順序。在冒泡階段，事件會由最內層的元素開始向外層元素冒泡，然后再逐級執行父元素的事件處理函數。因此，當我們點擊按鈕時，點擊事件會首先觸發按鈕的事件處理函數，然后冒泡到嵌套的 元素上，繼續執行該元素的事件處理函數。但是，由于 元素還嵌套在最外層的 元素中，所以事件會再次冒泡到最外層的元素上，導致最外層的事件處理函數再次執行。
解決這個問題的方法可以有多種，下面我們來介紹兩種常用的方式：
- 停止事件冒泡：
在事件處理函數中調用 event.stopPropagation() 方法可以阻止事件的進一步傳播，即停止事件冒泡。修改上述代碼示例的按鈕的事件處理函數如下：
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() 方法阻止事件冒泡，或者通過監聽捕獲階段處理事件避免重復執行。
