點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

前端在面試的時候，有可能就會問到「事件委託」這麼一個概念，不要慌，關於事件委託大家可能聽的少，覺得這個問題問的很正經，但是，只要你是做前端的，你一定用過事件委託，至少在你碰到的需求中你應該用了。

這篇，我們從兩個方面來搞懂它，1、概念（什麼是事件委託）。2、好處（事件委託到底給我們帶來哪些好處）

一、關於「事件委託」的概念：

委託：從字面上來理解，就是讓別人來做，而事件就是通常我們用的點擊，移入、移出等事件。總的來說，就是利用冒泡的原理，把子元素上的事件加在父元素上，觸發其執行。

什麼個意思了，下面我舉一個非常清晰的例子來演示一下：

下面是這個例子的DOM結構：

假如我們要給這個UL中的所有子元素LI加個點擊事件（或者給一個DIV中的某些特定的CLASS值子元素綁定事件），不需要將子元素循環（for）來綁定事件，只需要將這個事件綁定在它們的父元素上就行，像下面這樣子：

其中用e.target.nodeName來排除非LI的子元素。這就是事件委託。

二、關於「事件委託」的好處：

事件委託帶來的很明顯的好處至少有這三個：

1、提高性能

如果有很多個子元素需要使用for循環來綁定事件的話，那麼這樣的處理方式是比較影響性能的。然而，使用事件委託的方式，HTML不變，將事件只綁定在它們的父元素上就行，這個性能的優化是很明顯的。

2、動態添加的子元素也會綁定之前的事件

這個很好理解，如果使用for循環來給子元素添加綁定事件，然後，在添加一個子元素，這個新添加的子元素是不會綁定事件的，因為它沒有在之前的循環內。

但是使用事件委託，將事件綁定在它們的父元素上，相當於對它的所有子元素都綁定了這個事件。即使在添加一個子元素，它也會綁定這個事件（無需重新綁定）。

3、代碼變的好維護

相對來說，代碼變的更加清晰，所有子元素，只需要初始化時綁定一次，之後不管是新增子元素都無需再在元素上綁定事件。

三、寫在最後的總結：

關於事件委託，像jQuery等一些庫都有封裝好的方法，可以拿來即用，非常方便，本篇主要是和大家交流一下什麼事件委託及好處。

以上純屬小鄭子個人理解，如有不對可以留言交流，謝謝！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！