JavaScript事件冒泡是一種事件傳遞的方式，事件會從觸發它的元素逐級向上冒泡，直到到達文檔的根節點。在這個過程中，事件會逐漸層層傳遞到元素的祖先元素，直到捕獲到事件或者到達文檔的根節點。這個過程是自底向上的，因此被稱為冒泡。

為什么使用JavaScript事件冒泡？因為冒泡事件能夠有效地減少代碼的復雜性，能夠有效地提高網站的性能，同時減少代碼的冗余。例如，在網頁中如果有多個按鈕元素，每個按鈕的click事件都需要獨立的代碼去處理，那么就會引起代碼的冗余，這時，通過事件冒泡，只需要在它們的父親元素上監聽click事件，就能夠不重復地處理多個按鈕的事件。

下面的示例代碼展示事件冒泡:

<div id="parent">
<div id="child">
<button id="btn">Click Me</button>
</div>
</div>

當用戶單擊按鈕時會觸發 click 事件，由于該事件會從按鈕元素向上逐級冒泡直到 document，所以 click 事件會按如下順序觸發:

button -> child -> parent -> document

在代碼中，可以使用事件監聽器來利用事件冒泡機制捕獲事件。事件監聽器的基本語法如下：

element.addEventListener(event, function, useCapture);

其中，event參數指定要監聽的事件類型；function參數是事件觸發時的回調函數；useCapture參數指定事件是在捕獲還是冒泡階段處理。默認情況下，useCapture參數為 false，表示事件是在冒泡階段處理。如果useCapture為true，表示事件是在捕獲階段處理。下面代碼 演示事件在捕獲階段執行：

<div id="parent">
<div id="child">
<button id="btn">Click Me>/button>
</div>
</div>
<script>
const parent = document.getElementById('parent')
const child = document.getElementById('child')
const btn = document.getElementById('btn')
parent.addEventListener('click', () => {
console.log('Parent captured')
}, true)
child.addEventListener('click', () => {
console.log('Child captured')
}, true)
btn.addEventListener('click', () => {
console.log('Button clicked')
})
</script>

在上面的代碼中，我們使用了addEventListener方法來把單擊事件綁定到按鈕元素上，在按鈕元素上單擊時，事件會從根元素向下捕獲，然后到達子項目，最后到達按鈕元素。在這個過程中，事件會在捕獲階段被處理，所以會先輸出“Parent captured”，然后是“Child captured”，最后是“Button clicked”。

總之，JavaScript事件冒泡是通過從子元素到父元素逐級傳遞事件的機制，可以有效地減少代碼復雜性和代碼冗余。使用事件監聽器來控制事件冒泡的順序和是否應捕獲事件可以進一步控制事件傳遞的流程。了解JavaScript事件冒泡的機制，可以使你更好地設計網站和提高代碼的可維護性。