為什么事件冒泡會連續(xù)發(fā)生兩次？
事件冒泡是 web 開發(fā)中一個重要的概念，它指的是當一個事件在嵌套的 HTML 元素中觸發(fā)時，事件會從最內(nèi)層的元素開始一直冒泡到最外層的元素。這個過程有時會引起困惑，其中一個常見問題就是事件冒泡會連續(xù)發(fā)生兩次。
為了更好的理解為什么事件冒泡會連續(xù)發(fā)生兩次，我們先來看一段代碼示例：
<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>
登錄后復制
上述代碼創(chuàng)建了一個嵌套的 HTML 結構，其中包含一個最外層的 元素（id=”outer”），一個嵌套在其中的 元素（id=”inner”），以及一個按鈕元素（id=”button”）。
在這段代碼中，我們?yōu)槊總€元素添加了點擊事件監(jiān)聽器，用于輸出對應元素被點擊的信息。當我們在頁面上點擊按鈕時，我們期望的輸出結果是：
Button clicked Inner div clicked Outer div clicked
登錄后復制
然而，實際上的輸出卻是：
Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked
登錄后復制
可以看到，事件冒泡會連續(xù)發(fā)生兩次，導致事件處理函數(shù)重復執(zhí)行。
這個問題的根本原因在于事件冒泡階段的執(zhí)行順序。在冒泡階段，事件會由最內(nèi)層的元素開始向外層元素冒泡，然后再逐級執(zhí)行父元素的事件處理函數(shù)。因此，當我們點擊按鈕時，點擊事件會首先觸發(fā)按鈕的事件處理函數(shù)，然后冒泡到嵌套的 元素上，繼續(xù)執(zhí)行該元素的事件處理函數(shù)。但是，由于 元素還嵌套在最外層的 元素中，所以事件會再次冒泡到最外層的元素上，導致最外層的事件處理函數(shù)再次執(zhí)行。
解決這個問題的方法可以有多種，下面我們來介紹兩種常用的方式：
- 停止事件冒泡：
在事件處理函數(shù)中調(diào)用 event.stopPropagation() 方法可以阻止事件的進一步傳播，即停止事件冒泡。修改上述代碼示例的按鈕的事件處理函數(shù)如下：
document.getElementById('button').addEventListener('click', function(event) {
console.log('Button clicked');
event.stopPropagation(); // 阻止事件冒泡
});
登錄后復制
使用 event.stopPropagation() 方法后，事件冒泡會在按鈕元素上停止，不會再傳播到嵌套的 元素和最外層的 元素上。因此，事件處理函數(shù)只會執(zhí)行一次，輸出的結果為：
Button clicked
登錄后復制
- 監(jiān)聽捕獲階段：
除了事件冒泡階段外，DOM 事件還有一個捕獲階段。捕獲階段是指事件從最外層的元素開始向內(nèi)層元素傳播的過程。利用捕獲階段，可以在最外層的元素上添加事件監(jiān)聽器，并在捕獲階段處理事件，然后再決定是否執(zhí)行其他元素上的事件處理函數(shù)。修改上述代碼示例的最外層 元素的事件處理函數(shù)如下：
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
}, true); // 添加 true 參數(shù)表示監(jiān)聽捕獲階段
登錄后復制
通過在最外層元素上添加參數(shù)為 true 的事件監(jiān)聽器，可以在捕獲階段執(zhí)行事件處理函數(shù)。這樣，在事件冒泡階段，事件就不會再次觸發(fā)最外層元素上的事件處理函數(shù)，從而避免了重復執(zhí)行。
總結起來，事件冒泡會連續(xù)發(fā)生兩次是因為事件在冒泡階段會從最內(nèi)層元素一直冒泡到最外層元素，并且會執(zhí)行每個元素上的事件處理函數(shù)。為了解決這個問題，我們可以使用 event.stopPropagation() 方法阻止事件冒泡，或者通過監(jiān)聽捕獲階段處理事件避免重復執(zhí)行。
