寫在前面

DOM 文件程式設計介面中並沒有為 DOM元素 提供原生的事件委託介面。對於 DOM 中的事件機制，原生 DOM 僅僅提供了事件模型的介面：事件監聽與處理。事件監聽與處理目前是有兩種方式實現，即 on{eventtype} 和 addEventListener。具體參看上篇部落格 最全的DOM事件筆記

事件委託思想是程式設計師在實際需求中發掘出來的。例如有這樣一個需求：

在 原生DOM 提供的 DOM事件物件 的基礎上，有好幾種實現事件委託的方法。比如 JQuery 庫中封裝好的 on() 方法。那麼下面介紹幾種在原生 DOM語法 中的事件委託的實現方法。

假設場景如下：

<div class="grandpa">
      <div class="father">
            <div class="child">
              <span class="text">文字</span>
            </div>
      </div>
</div>
 

需求如下：

對兒子元素（.child）進行 click 事件監聽，當該元素被點選時，在控制檯輸出 我是兒子，我被點選了！ 。

1. 常見但錯誤的方法

const grandpaEl = document.getElementsByClassName('grandpa')[0];
grandpaEl.addEventListener('click', (e)=>{
      const el = e.target;
      if(el.className === 'child'){
            console.log('我是兒子，我被點選了！');
      }
})
 

這樣得到的結果是，當點選 .child 元素時會正確輸出，但當點選 .child 裡面的 .text 元素時不會正確輸出。

根據我們的實際需求，當點選父元素包裹的子元素時，也是相當於點選了父元素，應當觸發對應的事件處理函式。因此此種方法嚴格來說是錯誤的。

此種方法只適用於被監聽的元素沒有後代元素時使用。

2. 遞迴方法

3. 巧用 path 屬性