事件冒泡為何會觸發兩次？
事件冒泡（Event Bubbling）是指在DOM中，當一個元素觸發了某個事件（例如點擊事件），該事件會從該元素開始向上冒泡至父元素，直到冒泡到最頂層的文檔對象為止。事件冒泡是DOM事件模型的一部分，它允許開發者將事件監聽綁定到父元素，從而在子元素觸發事件時，可以通過冒泡機制來捕獲并處理事件。
然而，有時開發者會遇到事件冒泡觸發兩次的情況，這通常出現在嵌套元素中。為了更好地理解為何會觸發兩次，我們來看一個具體的代碼示例。
HTML代碼如下：
<div id="parent">
<div id="child">
<button id="button">點擊我</button>
</div>
</div>
登錄后復制
JavaScript代碼如下：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");
parent.addEventListener("click", function(event) {
console.log("父元素被點擊");
});
child.addEventListener("click", function(event) {
console.log("子元素被點擊");
});
button.addEventListener("click", function(event) {
console.log("按鈕被點擊");
event.stopPropagation();
});
登錄后復制
在上述代碼中，我們有一個父元素、一個子元素和一個按鈕，分別綁定點擊事件監聽。當我們在網頁中點擊按鈕時，事件將按照冒泡規則從子元素傳遞至父元素。
現在，讓我們來模擬一次點擊按鈕的操作。當我們點擊按鈕時，控制臺將打印如下輸出：
按鈕被點擊 子元素被點擊
登錄后復制
為什么會觸發兩次呢？
這是因為事件冒泡要從觸發元素開始依次向上冒泡至父元素，而在這個過程中經過了子元素和父元素兩層。當我們點擊按鈕時，首先觸發了按鈕的點擊事件，打印出”按鈕被點擊”。接著，事件繼續冒泡至子元素，觸發了子元素的點擊事件，打印出”子元素被點擊”。最后，冒泡繼續至父元素，觸發了父元素的點擊事件。
那如何阻止事件冒泡觸發兩次呢？
我們可以通過在按鈕的點擊事件處理函數中調用event.stopPropagation()來阻止事件繼續冒泡。在上述代碼中，我們已經在按鈕的點擊事件中使用了這個方法。當我們再次點擊按鈕時，控制臺將只打印出”按鈕被點擊”，而不會繼續冒泡至子元素和父元素。
總結來說，事件冒泡會觸發兩次的情況通常出現在嵌套元素中，當一個元素觸發了某個事件時，事件會從觸發元素開始向上冒泡至父元素，直到冒泡到最頂層的文檔對象為止。然而，我們可以通過調用event.stopPropagation()來阻止事件繼續冒泡，從而達到阻止事件冒泡觸發兩次的目的。
