概念：
JavaScript高級程序設計 (簡稱JS高程) ：事件代理 (事件委託) 利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
作用：
減少與dom的交互次數，提高代碼性能。 (–代碼性能–)
在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的整體運行性能，因爲需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是爲什麼性能優化的主要思想之一就是要減少DOM操作；如果使用事件代理，就會將所有的操作放到js程序裏面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能。
JS高程上關於代碼優化中提到了：如果可能，在文檔級別附加事件處理程序，這樣可以處理整個頁面的事件。
動態生成DOM元素時，可通過事件代理給新增的元素添加事件函數。
比如在異步獲取後臺數據加載頁面時，直接給動態生成的DOM元素綁定事件函數可能需要在ajax交互時加入事件函數，這樣往往會使得代碼變得混亂，而使用事件代理則會非常方便。
原理：
事件冒泡：事件開始時由嵌套層次最深的節點開始接收，然後逐級向其父級節點傳播。
例：頁面中有 div>ul>li>p 的結構，當你 click 了 p 元素，click 事件首先在 p 元素上發生，然後，click 事件沿DOM樹向上傳播，分別在 li>ul>div 上發生，按照JS高程上的說明，最終會傳播到 document 對象。
注：與事件冒泡對應的還有事件捕獲。
事件代理：利用事件冒泡原理，把事件函數綁定在父級元素上，再指定需要執行函數的子元素執行事件函數；在觸發事件時，事件會依次冒泡到父級元素，從而觸發綁定在父級元素的事件函數。
對於事件代理原理的理解，閱讀下面關於事件對象和具體用法的介紹後會更加清晰。
用法：
1.原生JS
事件對象：在觸發DOM上的某個事件時，會產生一個事件對象 event，這個對象中包含着所有與事件有關的信息，在執行事件處理程序時 event 對象會被傳入；只有在事件處理程序執行期間，event 對象纔會存在；一旦事件處理程序執行完成，event 對象就會被銷燬；對於事件代理，這裏重點介紹下 event 的幾個屬性。
currentTarget ：其事件函數當前正在處理事件的那個元素；如果感覺這個定義有點拗口，你可以暫且把 currentTarget 簡單的理解爲原生JS中事件函數內部的 this 。
target ：事件目標；即觸發事件的實際目標。
這裏用一個例子說明：假設頁面中有 ul>li>p 的結構，然後點擊 p 標籤來執行下面代碼(這裏爲方便閱讀沒有做兼容性處理，此代碼需要在chrome瀏覽器下運行)
var ul = document.querySelector(‘ul’);
var li = document.querySelector(‘li’);
var p = document.querySelector(‘p’);
ul.onclick = function(event) {
console.log(this); //
- …
console.log(event.currentTarget); //
- …
console.log(event.target); //
…
}
從運行結果可以看到，當把事件函數綁定在父元素時，currentTarget 屬性和函數內部的 this 都爲綁定事件函數的父元素，而 target 屬性的值則是我們想要觸發事件的子元素。
具體用法：給父元素綁定事件函數，然後通過條件判斷找到需要執行事件函數的元素。
頁面結構如下：
AAA
BBB
ul.onclick = function(e) {
// 兼容性處理
var e = e || window.event;
var target = e.target || e.srcElement;
switch (target.id){
case "aaa":
alert("AAA");
break;
case "bbb":
alert("BBB");
break;
default :
alert("未點擊 p 標籤");
break;
}
}
從測試結果可以看到，只在父元素上綁定一次事件函數，通過條件判斷可以分別找到父元素下觸發事件的子元素，然後分別進行操作。
2.jQuery
jQuery 的 on 方法中已經封裝好了事件代理的功能，而且事件函數內部的 this 直接指向的就是被指定的元素。
// on 的3個參數 1.事件類型 2.給事件指定的元素 3.事件函數
$(“div”).on(“click”, “p”, function () {
alert(“p”);
console.log(this); // p
})
注意 jQuery 的 on 方法中 this 直接指向的就是觸發事件的子元素 p 。