事件冒泡與事件捕獲的原理與實現方式

事件冒泡（Event Bubbling）和事件捕獲（Event Capturing）是JavaScript中處理DOM（文檔對象模型）事件的兩種不同的機制。了解它們的原理和實現方式可以幫助我們更好地理解和處理事件。

事件冒泡原理：
事件冒泡是指當一個具體的事件發生在某個DOM元素上時，如果該元素定義了該事件的處理函數，那么該事件將首先在該元素上觸發，然后逐級向上冒泡至該元素的父元素，直到觸發文檔根元素的處理函數。

實現方式：
在JavaScript中，我們可以使用addEventListener方法來為元素添加事件監聽器，從而實現事件冒泡。
以下是一個示例：

// HTML代碼：
<div id="outer">
  <div id="inner">
    <button id="btn">按鈕</button>
  </div>
</div>

// JavaScript代碼：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外層div被點擊！');
});

inner.addEventListener('click', function() {
  console.log('內層div被點擊！');
});

btn.addEventListener('click', function(event) {
  console.log('按鈕被點擊！');
  event.stopPropagation(); // 阻止事件冒泡
});

在以上代碼中，當我們點擊按鈕時，事件冒泡會從最內層元素逐級向上觸發，先執行按鈕的點擊事件處理函數，然后是內層div的事件處理函數，最后是外層div的事件處理函數。

事件捕獲原理：
事件捕獲與事件冒泡相反，事件捕獲是指在觸發具體事件之前，從文檔根元素開始，逐級向下經過DOM樹的各個元素，直到該元素的事件處理函數被觸發。

實現方式：
同樣地，我們可以使用addEventListener方法來為元素添加事件監聽器，從而實現事件捕獲。
以下是一個示例：

// HTML代碼：
<div id="outer">
  <div id="inner">
    <button id="btn">按鈕</button>
  </div>
</div>

// JavaScript代碼：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外層div被點擊！');
}, true);

inner.addEventListener('click', function() {
  console.log('內層div被點擊！');
}, true);

btn.addEventListener('click', function() {
  console.log('按鈕被點擊！');
}, true);

在以上代碼中，當我們點擊按鈕時，事件會從文檔根元素開始，逐級向下觸發，先執行外層div的事件處理函數，然后是內層div的事件處理函數，最后才執行按鈕的點擊事件處理函數。

事件冒泡和事件捕獲是JavaScript中處理DOM事件的兩種不同機制，它們分別沿著DOM樹的不同方向進行事件的傳播。事件冒泡從觸發元素開始，逐級向上冒泡至文檔根元素；事件捕獲從文檔根元素開始，逐級向下傳播至觸發元素。我們可以使用addEventListener方法為元素添加事件監聽器，在第三個參數中設置是否使用事件捕獲或者冒泡。