事件為何冒泡會觸發(fā)兩次？

事件冒泡（Event Bubbling）是指在DOM中，當(dāng)一個元素觸發(fā)了某個事件（例如點擊事件），該事件會從該元素開始向上冒泡至父元素，直到冒泡到最頂層的文檔物件為止。事件冒泡是DOM事件模型的一部分，它允許開發(fā)者將事件監(jiān)聽綁定到父元素，從而在子元素觸發(fā)事件時，可以透過冒泡機制來捕獲並處理事件。

然而，有時開發(fā)者會遇到事件冒泡觸發(fā)兩次的情況，這通常出現(xiàn)在巢狀元素中。為了更好地理解為何會觸發(fā)兩次，我們來看一個具體的程式碼範(fàn)例。

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();
});

在上述程式碼中，我們有一個父元素、一個子元素和一個按鈕，分別綁定點擊事件監(jiān)聽。當(dāng)我們在網(wǎng)頁中點擊按鈕時，事件將依照冒泡規(guī)則從子元素傳遞至父元素。

現(xiàn)在，讓我們來模擬一次點擊按鈕的動作。當(dāng)我們點擊按鈕時，控制臺將列印以下輸出：

按鈕被點擊
子元素被點擊

為什麼會觸發(fā)兩次？

這是因為事件冒泡要從觸發(fā)元素開始依序向上冒泡至父元素，而在這個過程中經(jīng)過了子元素和父元素兩層。當(dāng)我們點擊按鈕時，首先觸發(fā)了按鈕的點擊事件，列印出"按鈕被點擊"。接著，事件繼續(xù)冒泡至子元素，觸發(fā)了子元素的點擊事件，列印出"子元素被點擊"。最後，冒泡繼續(xù)至父元素，觸發(fā)了父元素的點擊事件。

那要如何阻止事件冒泡觸發(fā)兩次呢？

我們可以透過在按鈕的點擊事件處理函數(shù)中呼叫event.stopPropagation()來阻止事件繼續(xù)冒泡。在上述程式碼中，我們已經(jīng)在按鈕的點擊事件中使用了這個方法。當(dāng)我們再次點擊按鈕時，控制臺將只列印出"按鈕被點擊"，而不會繼續(xù)冒泡至子元素和父元素。

總結(jié)來說，事件冒泡會觸發(fā)兩次的情況通常出現(xiàn)在巢狀元素中，當(dāng)一個元素觸發(fā)了某個事件時，事件會從觸發(fā)元素開始向上冒泡至父元素，直到冒泡到最頂層的文檔物件為止。然而，我們可以透過呼叫event.stopPropagation()來阻止事件繼續(xù)冒泡，從而達到阻止事件冒泡觸發(fā)兩次的目的。

以上是事件冒泡為何會觸發(fā)兩次？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！