事件冒泡為何會重復觸發兩次？
在前端開發中，我們經常會遇到事件冒泡的概念。事件冒泡是指在頁面上觸發某個元素的特定事件時，該事件會向上級元素逐層傳遞，直到最終傳遞到文檔對象。
然而，有時候我們可能會遇到事件冒泡觸發兩次的問題，即使我們只綁定了一次事件監聽器。那為什么會出現重復觸發的現象呢？下面就讓我們一起深入探討其中可能的原因。
首先，我們需要明確一個概念，即事件冒泡在瀏覽器中的工作原理。瀏覽器在觸發某個元素的特定事件時，會從該元素開始向上遍歷DOM樹，檢查每個父級元素是否綁定了該事件的事件處理程序。如果找到了事件處理程序，瀏覽器就會執行該處理程序，然后繼續向上遍歷直到文檔對象。這個過程就是事件冒泡。
但是，要注意的是，事件冒泡不僅僅會傳遞到父級元素，而且還會傳遞到祖先元素。也就是說，事件冒泡會重復觸發父級元素和祖先元素上的事件處理程序。這就可能導致事件觸發兩次的現象。
那么問題來了，為什么事件冒泡會傳遞到祖先元素呢？這是因為在綁定事件監聽器時，我們通常使用的是事件委托的方式。也就是將事件監聽器綁定到父元素上，然后通過事件冒泡的傳遞，讓父元素代替其子元素來處理事件。
如果我們綁定的事件監聽器在父元素和祖先元素上都存在，那么事件冒泡就會重復觸發兩次。這是因為瀏覽器在向上遍歷DOM樹時，會檢查每個父級元素和祖先元素是否綁定了相同的事件處理程序。如果存在，瀏覽器就會執行它們。
為了更好地理解這個問題，下面提供一個具體的代碼示例：
HTML代碼：
<div id="parent"> <div id="child">Click me!</div> </div>
登錄后復制
JavaScript代碼：
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent Clicked!');
});
child.addEventListener('click', function() {
console.log('Child Clicked!');
});
登錄后復制
在上面的代碼中，我們在父元素和子元素上都綁定了click事件的事件監聽器。當我們點擊子元素時，控制臺會輸出兩次的結果：“Child Clicked!”和“Parent Clicked!”。這是因為事件冒泡觸發了兩次，先是子元素的事件監聽器被執行，然后是父元素的事件監聽器被執行。
為了避免事件冒泡重復觸發兩次的問題，我們可以使用stopPropagation()方法來阻止事件繼續向上冒泡。例如，在上面的代碼中，我們可以在子元素的事件監聽器中添加一行代碼：
child.addEventListener('click', function(event) {
console.log('Child Clicked!');
event.stopPropagation();
});
登錄后復制
使用stopPropagation()方法后，只有子元素的事件監聽器被執行，父元素的事件監聽器將不再被執行。這樣，我們就可以避免事件冒泡觸發兩次的問題。
總結起來，事件冒泡會重復觸發兩次的原因是因為事件冒泡會傳遞到父元素和祖先元素上的事件處理程序。為了解決這個問題，我們可以使用stopPropagation()方法來阻止事件繼續向上冒泡。
希望通過本文的介紹，讀者們能夠對事件冒泡的原理和為何會重復觸發兩次有一個更加全面的了解，并在實際開發中遇到這個問題時能夠找到有效的解決辦法。
