如今 Vue 大行其道，大部分開發場景直接使用 @click 就實現了事件綁定，可能都沒思索過 JS 中的事件性能優化。

事件委托原理

事件委托 其主要是利用了事件冒泡這個特性。

以點擊事件 click 為例：將事件綁定在父元素上，點擊子元素會通過冒泡的方式觸發父元素的點擊事件。這種綁定事件的方式，就稱之為 事件委托，也稱為 事件代理。

示例

利用事件委托實現點擊 span 元素輸出 span 元素內容：

<ul class="parent">
  <div>div 內容</div>
  <li>第 1 個 li <span>第 1 個 span 內容</span></li>
  <li>第 2 個 li <span>第 2 個 span 內容</span></li>
  <li>第 3 個 li <span>第 3 個 span 內容</span></li>
  <li>第 4 個 li <span>第 4 個 span 內容</span></li>
  <li>第 5 個 li <span>第 5 個 span 內容</span></li>
  <li>第 6 個 li <span>第 6 個 span 內容</span></li>
  <li>第 7 個 li <span>第 7 個 span 內容</span></li>
  <li>第 8 個 li <span>第 8 個 span 內容</span></li>
</ul>

<script>
  (() => {
    const parent = document.querySelector('.parent')
    parent.addEventListener('click', (event) => {
      const target = event.target
      // 判斷事件響應元素是否是 span
      if (target.tagName.toLocaleLowerCase() === 'span') {
        console.log(target.innerText)
      }
    })
  })()
</script>

效果：

點擊 div 和 li 元素都不會觸發事件，點擊 span 元素會在控制臺輸出元素內容。

優點

1、由于 JS 綁定的事件只有一個父元素，所以節省了內存。
2、無需針對每一個子元素綁定事件，所以減少了子元素的事件注冊。
3、對于子元素的增刪改不用再新注冊事件，所以對子元素的操作要簡單很多。
4、對于存在大量子元素的頁面，由于減少了事件注冊次數，所以可以提高頁面性能。

缺點

既然事件委托那么有用，那么能不能直接將頁面上所有的事件都委托到 body 元素上？

這想法很豐滿，但顯示很骨感啊，這種情況如果都綁定到最頂層的元素上，那么會導致所有的子元素都會事件冒泡，然后觸發頂層元素的事件，這樣反而無法做到性能優化，還造成了一些不必要的浪費，畢竟不是所有的子元素都需要響應事件！！

寫在最后

性能優化這條路上，一直都存在各種話題，很多性能優化都是過猶不及，適當的場景用適當的方式才是最合理的。

代碼編寫并不是一蹴而就，很多時候，能實現功能就是好代碼，至于性能，在一些小的需求場景，您寫的代碼可能都無法觸發性能問題~~

堅持一個原則：不要過早優化。當我們的代碼確實觸發了性能問題，再考慮如何優化吧~~