JavaScript 中的冒泡機制是指當一個元素觸發了某個事件后，該事件將會一層層地向上傳遞至父級元素，直至到達文檔的根節點

比如說，在一個嵌套的列表中，如果你點擊了其中一個子元素，該點擊事件將會傳遞給父元素，然后再傳遞給上一級父元素，直至傳遞到文檔的根節點

<ul id="grandparent">
<li id="parent">
<a href="#">Parent</a>
<ul id="child">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
<script>
document.querySelector('#child').addEventListener('click', function(event) {
console.log(event.target.tagName); //返回li
});
</script>

在上述代碼中，當用戶點擊 #child 列表中的下一個元素時，該事件將會向上傳遞到 #parent，再傳遞到 #grandparent，最后到達文檔的根節點

如果希望阻止事件冒泡，可以使用 event.stopPropagation() 方法，來阻止事件向上傳遞

<ul id="grandparent">
<li id="parent">
<a href="#">Parent</a>
<ul id="child">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
<script>
document.querySelector('#child').addEventListener('click', function(event) {
event.stopPropagation(); //阻止事件冒泡
console.log(event.target.tagName); //返回li
});
document.querySelector('#parent').addEventListener('click', function(event) {
console.log(event.target.tagName); //返回a
});
document.querySelector('#grandparent').addEventListener('click', function(event) {
console.log(event.target.tagName); //返回a
});
</script>

在上述代碼中，當用戶點擊 #child 列表中的下一個元素時，通過調用 event.stopPropagation() 方法，可以阻止事件向上傳遞到 #parent 和 #grandparent 兩個元素。

總的來說，冒泡機制是一種非常實用的、常用的機制，它可以幫助開發人員管理復雜的文檔結構，在構建具有高互動性的現代 Web 應用程序時，它們可以提供強大而靈活的基礎。