JavaScript中的事件冒泡是指事件從子元素傳遞到父元素的過程，可以幫助我們方便地處理多層嵌套元素的事件。下面我們來看一些冒泡相關的代碼段。

一般情況下，事件會先從點擊的元素向外傳播，逐層向上找到最外層的父元素。我們比如有這樣一個HTML結構：

<div id="outer">
<div id="inner">點擊我</div>
</div>

當我們在內層的div上點擊時，事件會經過inner和outer兩個元素，如下代碼：

document.getElementById("outer").addEventListener("click", function() {
console.log("outer clicked");
});
document.getElementById("inner").addEventListener("click", function() {
console.log("inner clicked");
});

如果你點了inner，瀏覽器控制臺會先輸出"inner clicked"，再輸出"outer clicked"，因為事件從inner冒泡到了outer。

我們也可以通過一些技巧，控制事件的冒泡過程。比如，我們想讓點擊inner時只輸出它自己的信息，可以通過stopPropagation()方法阻止事件繼續冒泡。

document.getElementById("inner").addEventListener("click", function(event) {
console.log("inner clicked");
event.stopPropagation(); // 阻止事件向外進行冒泡
});

這樣，無論你是在inner還是outer上點擊，只會輸出相應元素自己的信息。

除了stopPropagation()，還有另一個方法preventDefault()可供使用。它可以阻止事件的默認行為，比如在鏈接上點擊時不跳轉。

document.getElementById("link").addEventListener("click", function(event) {
event.preventDefault(); // 阻止鏈接的默認跳轉行為
});

最后，我們也可以通過委托事件來優化代碼。委托事件是指將事件綁定到父元素上，根據子元素的事件目標，分發事件到對應的處理函數中。

document.getElementById("list").addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "LI") {
// 根據點擊目標篩選處理函數
console.log(event.target.innerHTML);
}
});

這個例子中，我們在ul元素上綁定了click事件，任何在下面的li元素上觸發的點擊事件都會被統一處理。通過判斷事件目標的節點類型，我們可以篩選出哪個li元素被點擊。