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

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

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

HTML程式碼如下：

<div id="parent">
  <div id="child">
    <button id="button">點(diǎn)擊我</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("父元素被點(diǎn)擊");
});

child.addEventListener("click", function(event) {
  console.log("子元素被點(diǎn)擊");
});

button.addEventListener("click", function(event) {
  console.log("按鈕被點(diǎn)擊");
  event.stopPropagation();
});

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

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

按鈕被點(diǎn)擊
子元素被點(diǎn)擊

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

這是因?yàn)槭录芭菀獜挠|發(fā)元素開始依序向上冒泡至父元素，而在這個(gè)過(guò)程中經(jīng)過(guò)了子元素和父元素兩層。當(dāng)我們點(diǎn)擊按鈕時(shí)，首先觸發(fā)了按鈕的點(diǎn)擊事件，列印出"按鈕被點(diǎn)擊"。接著，事件繼續(xù)冒泡至子元素，觸發(fā)了子元素的點(diǎn)擊事件，列印出"子元素被點(diǎn)擊"。最後，冒泡繼續(xù)至父元素，觸發(fā)了父元素的點(diǎn)擊事件。

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

我們可以透過(guò)在按鈕的點(diǎn)擊事件處理函數(shù)中呼叫event.stopPropagation()來(lái)阻止事件繼續(xù)冒泡。在上述程式碼中，我們已經(jīng)在按鈕的點(diǎn)擊事件中使用了這個(gè)方法。當(dāng)我們?cè)俅吸c(diǎn)擊按鈕時(shí)，控制臺(tái)將只列印出"按鈕被點(diǎn)擊"，而不會(huì)繼續(xù)冒泡至子元素和父元素。

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

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