JavaScript中的冒泡和捕獲都是事件傳播機制。
事件傳遞機制是指在DOM樹結構中，一個事件在觸發后如何向上傳遞或向下傳遞。在HTML中，每個元素的事件將由子元素依次向上傳遞到父元素。而在JavaScript中，則可以使用“冒泡”和“捕獲”來分別控制事件的傳遞方向。
舉個例子，在下面的HTML代碼中：
<html> <body> <div id="div1"> <div id="div2"> <button id="btn">Click me</button> </div> </div> </body> </html>
如果我們需要在點擊button按鈕后輸出“Button clicked!”語句，可以使用以下JavaScript代碼：
document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};但是如果我們在div2中也定義了一個相同的點擊事件，那么該事件會在button事件之前觸發嗎？這就需要用到事件的傳遞方向了。
首先，我們先來看一下冒泡事件傳遞機制。它的傳遞方向是從子元素依次向上傳遞到父元素。在以上的HTML代碼中，事件首先在button元素上觸發，然后再依次向上傳遞到div2和div1，直到傳遞到document對象。因此，如果我們在div2中也定義了一個點擊事件，它的觸發時間將排在button事件之后。
以下是實現冒泡事件傳遞的JavaScript代碼：
document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};
document.getElementById("div2").onclick = function() {
console.log("div2 clicked!");
};
document.getElementById("div1").onclick = function() {
console.log("div1 clicked!");
};
document.onclick = function() {
console.log("document clicked!");
};當我們點擊button按鈕時，輸出的結果將是：
Button clicked! div2 clicked! div1 clicked! document clicked!
現在我們再來看看捕獲事件傳遞機制。它的傳遞方向是從父元素依次向下傳遞到子元素。與冒泡事件傳遞機制相比，它的觸發順序是相反的。
以下是實現捕獲事件傳遞的JavaScript代碼：
document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};
document.getElementById("div2").addEventListener("click", function() {
console.log("div2 clicked!");
}, true);
document.getElementById("div1").addEventListener("click", function() {
console.log("div1 clicked!");
}, true);
document.addEventListener("click", function() {
console.log("document clicked!");
}, true);此時，當我們點擊button按鈕時，輸出的結果將是：
document clicked! div1 clicked! div2 clicked! Button clicked!
在以上代碼中，我們通過添加第三個參數（true）來啟用了捕獲事件傳遞機制。結果表明，觸發順序恰好相反，先從document對象開始逐級向下找到子元素進行事件處理，最后是button元素。
在實際應用中，根據具體情況選擇不同的事件傳遞方向可以提高事件處理效率，縮短事件處理時間。此外，了解JavaScript中的事件傳遞機制還有利于我們更好地理解DOM樹結構、熟悉各種事件類型，掌握JavaScript事件處理機制。