還有很多要學，要加油哇?；卣}。
參考： js中的事件委托或是事件代理詳解

1、基本概念
事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
使用事件委托技術能避免對特定的每個節點添加事件監聽器，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件?？捎糜诓僮鲃討B添加的節點。

2、為什么要用事件委托
一般來說，dom需要有事件處理程序，我們都會直接給它設事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？
在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能；
每個函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，自然性能就越差了（占內存），比如上面的100個li，就要占用100個內存空間。如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作，這樣我們就需要一個內存空間就夠了，自然性能就會更好。

3、例子
HTML代碼：

 <ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>

JS代碼：
當子元素的事件冒泡到父ul元素時，你可以檢查事件對象的target屬性，捕獲真正被點擊的節點元素的引用。下面是一段很簡單的JavaScript代碼，演示了事件委托的過程：

// 找到父元素，添加監聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被點擊的元素!
    // 如果被點擊的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // 找到目標，輸出ID!
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
    }
});

第一步是給父元素添加事件監聽器。當有事件觸發監聽器時，檢查事件的來源，排除非li子元素事件。如果是一個li元素，即目標！如果不是一個li元素，事件將被忽略。

4、適用場景
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout雖然也有事件冒泡，但是處理它們的時候需要特別的注意，因為需要經常計算它們的位置，處理起來不太容易。
不適合的就有很多了，舉個例子，mousemove，每次都要計算它的位置，非常不好把控，在不如說focus，blur之類的，本身就沒用冒泡的特性，自然就不能用事件委托了。