還有很多要學，要加油哇〖碓螅回正題慎菲。
參考： js中的事件委托或是事件代理詳解
1、基本概念
事件委托就是利用事件冒泡聂抢，只指定一個事件處理程序钧嘶，就可以管理某一類型的所有事件棠众。
使用事件委托技術(shù)能避免對特定的每個節(jié)點添加事件監(jiān)聽器琳疏，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會分析從子元素冒泡上來的事件闸拿，找到是哪個子元素的事件空盼。可用于操作動態(tài)添加的節(jié)點新荤。
2揽趾、為什么要用事件委托
一般來說，dom需要有事件處理程序苛骨，我們都會直接給它設(shè)事件處理程序就好了篱瞎，那如果是很多的dom需要添加事件處理呢？比如我們有100個li痒芝，每個li都有相同的click點擊事件俐筋，可能我們會用for循環(huán)的方法，來遍歷所有的li严衬，然后給它們添加事件澄者，那這么做會存在什么影響呢？
在JavaScript中请琳，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能粱挡，因為需要不斷的與dom節(jié)點進行交互，訪問dom的次數(shù)越多俄精，引起瀏覽器重繪與重排的次數(shù)也就越多询筏，就會延長整個頁面的交互就緒時間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因竖慧；如果要用事件委托嫌套，就會將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次测蘑，這樣就能大大的減少與dom的交互次數(shù)灌危，提高性能；
每個函數(shù)都是一個對象碳胳，是對象就會占用內(nèi)存勇蝙，對象越多，內(nèi)存占用率就越大挨约，自然性能就越差了（占內(nèi)存）味混，比如上面的100個li产雹，就要占用100個內(nèi)存空間。如果用事件委托翁锡，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作蔓挖，這樣我們就需要一個內(nèi)存空間就夠了，自然性能就會更好馆衔。
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屬性角溃，捕獲真正被點擊的節(jié)點元素的引用拷获。下面是一段很簡單的JavaScript代碼，演示了事件委托的過程：
// 找到父元素减细，添加監(jiān)聽器...
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!");
}
});
第一步是給父元素添加事件監(jiān)聽器。當有事件觸發(fā)監(jiān)聽器時未蝌，檢查事件的來源驮吱，排除非li子元素事件。如果是一個li元素萧吠，即目標左冬！如果不是一個li元素，事件將被忽略怎憋。
4又碌、適用場景
適合用事件委托的事件：click，mousedown绊袋，mouseup毕匀，keydown，keyup癌别，keypress皂岔。
值得注意的是，mouseover和mouseout雖然也有事件冒泡展姐，但是處理它們的時候需要特別的注意躁垛，因為需要經(jīng)常計算它們的位置，處理起來不太容易圾笨。
不適合的就有很多了教馆，舉個例子，mousemove擂达，每次都要計算它的位置土铺，非常不好把控，在不如說focus，blur之類的悲敷，本身就沒用冒泡的特性究恤，自然就不能用事件委托了。
