在 JavaScript 中，事件處理程序的執行順序取決于事件捕獲和事件冒泡。事件捕獲是從根節點開始，逐級向下傳遞事件，直到到達目標元素。事件冒泡則是從事件目標開始，向上回溯至根節點。

以下是如何在 JavaScript 中實現事件冒泡和捕獲的示例：

1. 為元素添加事件監聽器并指定 useCapture 參數：

element.addEventListener('click', function(event) {
  console.log('捕獲階段');
}, true); // useCapture 設置為 true 表示在捕獲階段執行

element.addEventListener('click', function(event) {
  console.log('冒泡階段');
}, false); // useCapture 設置為 false 表示在冒泡階段執行

2. 創建一個簡單的 HTML 結構來測試事件冒泡和捕獲：

<div id="parent">
  父元素
  <button id="child">子元素</button>
</div>

3. 使用以下 JavaScript 代碼測試事件冒泡和捕獲：

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(event) {
  console.log('父元素捕獲階段');
});

child.addEventListener('click', function(event) {
  console.log('子元素捕獲階段');
});

parent.addEventListener('click', function(event) {
  console.log('父元素冒泡階段');
});

child.addEventListener('click', function(event) {
  console.log('子元素冒泡階段');
});

當點擊子元素時，事件處理程序將按照以下順序執行：

• 子元素捕獲階段
• 父元素捕獲階段
• 子元素冒泡階段
• 父元素冒泡階段

通過調整 useCapture 參數的值，您可以在事件捕獲或事件冒泡階段執行自定義的處理程序。