事件冒泡是JavaScript中事件從子元素向祖先元素逐級觸發(fā)的傳播機制。當你在嵌套結構中點擊一個元素，事件會從目標元素開始向上冒泡，依次觸發(fā)父元素的同類型事件，默認情況下大多數(shù)事件在冒泡階段執(zhí)行。例如點擊按鈕時，先執(zhí)行按鈕的點擊處理函數(shù)，再執(zhí)行外層div的點擊處理函數(shù)。要阻止事件冒泡，可以使用Event.stoppropagation()方法，它阻止事件繼續(xù)向上傳播但不影響當前元素其他監(jiān)聽器的執(zhí)行；若同時想阻止默認行為，還需使用event.preventdefault()。實際開發(fā)中，如菜單彈出框或下拉框場景，點擊子元素不希望觸發(fā)父元素事件時，可用stoppropagation()避免意外行為。其他相關方法包括event.stopimmediatepropagation()（阻止冒泡和后續(xù)監(jiān)聽器執(zhí)行）以及理解event.target與event.currenttarget的區(qū)別，target是真正觸發(fā)事件的元素，currenttarget是當前處理事件的元素。掌握這些機制有助于解決復雜結構中的事件處理問題。
事件冒泡是 JavaScript 中事件傳播的一種機制。簡單來說，當你在一個嵌套結構中觸發(fā)某個元素的事件（比如點擊一個按鈕），這個事件會從最內層的目標元素開始，然后向外傳播，逐級向上觸發(fā)父元素、祖父元素等祖先元素上的同類型事件。
比如你有一個 div 里面包著一個按鈕，給它們都綁定了點擊事件，那么點擊按鈕時，先執(zhí)行按鈕的點擊處理函數(shù)，再執(zhí)行外層 div 的點擊處理函數(shù)。這就是事件冒泡的表現(xiàn)。
什么是事件冒泡？
在 dom 事件流中，事件傳播分為三個階段：捕獲階段、目標階段和冒泡階段。默認情況下，大多數(shù)事件是在冒泡階段被觸發(fā)的。
舉個例子：
<div id="outer"> 外層 div <button id="inner">點我</button> </div>
JS代碼：
document.getElementById('outer').addEventListener('click', function() { console.log('外層被點擊了'); }); document.getElementById('inner').addEventListener('click', function() { console.log('按鈕被點擊了'); });
當你點擊按鈕時，控制臺輸出順序是：
按鈕被點擊了 外層被點擊了
這說明事件從按鈕冒泡到了外層 div。
如何阻止事件冒泡？
要阻止事件繼續(xù)向上冒泡，可以使用 event.stopPropagation() 方法。它能阻止事件繼續(xù)向上傳播，但不會影響當前元素上其他事件監(jiān)聽器的執(zhí)行。
修改上面的例子：
document.getElementById('inner').addEventListener('click', function(event) { event.stopPropagation(); console.log('按鈕被點擊了'); });
現(xiàn)在點擊按鈕時，只會輸出：
按鈕被點擊了
外層 div 的點擊事件不會再被觸發(fā)。
??注意：
- stopPropagation() 只阻止冒泡，不阻止默認行為（如鏈接跳轉、表單提交等）。
- 如果你想同時阻止默認行為，需要用 event.preventDefault()。
實際開發(fā)中的常見問題
有時候你不希望點擊子元素時觸發(fā)父元素的事件，這時候就需要用到 stopPropagation()。
比如菜單彈出框、自定義下拉框等情況：
<div class="dropdown"> <button class="trigger">展開</button> <div class="menu"> <a href="#">選項1</a> <a href="#">選項2</a> </div> </div>
如果你點擊了 .menu 或里面的 ，不希望觸發(fā) .dropdown 上的點擊事件（比如隱藏菜單），就可以這樣處理：
document.querySelector('.menu').addEventListener('click', function(event) { event.stopPropagation(); });
這樣就不會因為點擊菜單內容而意外關閉整個菜單。
其他相關方法
除了 stopPropagation()，還有幾個相關的 API 值得了解：
- event.stopImmediatePropagation()：不僅能阻止事件冒泡，還能阻止當前元素上后續(xù)監(jiān)聽器的執(zhí)行。
- event.target vs event.currentTarget：
- target 是真正觸發(fā)事件的那個元素。
- currentTarget 是當前正在處理事件的那個元素（通常是綁定監(jiān)聽器的那個）。
這些細節(jié)在處理復雜結構時非常有用。
基本上就這些。事件冒泡是個基礎但容易忽略的機制，掌握好它可以避免很多意想不到的問題。
