Js 中的事件委託/事件代理

什麼叫事件委託/事件代理呢 ？

JavaScript高級程序設計上講：事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。

 

事件冒泡：

當事件發生後，這個事件就要開始傳播(從裏到外或者從外向裏)，爲何要傳播呢？由於事件源自己（可能）並無處理事件的能力，即處理事件的函數（方法）並未綁定在該事件源上。

例如咱們點擊一個按鈕時，就會產生一個click事件，但這個按鈕自己可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達可以處理這個事件的代碼中.

 

事件委託:

是利用事件的冒泡原理來實現的，何爲事件冒泡呢？

就是事件從最深的節點開始，而後逐步向上傳播事件，舉個例子：

 

下邊咱們來看一個示例：

 <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#"> a3</a>
    <a href="#">a4</a>
  </div>

  <button>
    點擊增長一個 a 標籤
  </button>

若是給每一個 <a>標籤一一都綁定一個事件，那對於內存消耗是很是大的。藉助事件代理，咱們只須要給父容器div綁定方法便可，這樣無論點擊的是哪個後代元素，都會根據冒泡傳播的傳遞機制，把父容器的click行爲觸發，而後把對應的方法執行，根據事件源，咱們能夠知道點擊的是誰，從而完成不一樣的事。

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
// e.target 能夠監聽到觸發點擊事件的元素是哪個
　　var target = e.target
　　if (e.nodeName === 'A') {
　　　　// 點擊的是 <a> 元素
　　　　alert(target.innerHTML)
　　}
})

 

爲何要用事件委託:

通常來講，dom須要有事件處理程序，咱們都會直接給它設事件處理程序就行了，那若是是不少的dom須要添加事件處理呢？好比咱們有100個li，每一個li都有相同的click點擊事件，可能咱們會用for循環的方法，來遍歷全部的li，而後給它們添加事件，那這麼作會存在什麼影響呢 ？

 

在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的總體性能，由於須要不斷的與dom節點進行交互，訪問dom的次數越多，引發瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是爲何性能優化的主要思想之一就是減小DOM操做的緣由；若是要用事件委託，就會將全部的操做放到js程序裏面，與dom的操做就只須要交互一次，這樣就能大大的減小與dom的交互次數，提升性能；

 

最後，使用代理的優勢以下：

• 使代碼簡潔

• 減小瀏覽器的內存佔用