剛開始接觸到事件委托這個概念，還是看javascritp高級程序設計接觸到的（js學習必備的書有木有）。
知道了什麼是事件冒泡機制，（事件捕獲因為不常用就不說了），然後明白了為什麼會有事件委托的產生，其實在學習html的時候，就應該明白一個網頁不只是平面的，更是立體的，一個頁面實際的空間比我們眼睛看到的還要多的多，就像隱藏在海平面下的冰山一樣。
如果明白了網頁是立體的就好理解為什麼有事件冒泡這個東西了。當你鼠標點擊或者劃過的時候，並不只是點擊了最上面的一層，在這個點擊的地方重疊的所有元素其實都被點擊了。那我們怎麼區分點擊的是哪個呢，哪個該對點擊這個事件響應呢，所以就有了冒泡這個東西，我每次都從最底層向上跑，都跑一遍，匹配到哪一個哪一個元素就響應。
在這個過程中通過event.target來判斷，
假設有一個這樣的結構：
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
你可以通過
var target=event.target; target.nodeName.toLowerCase() == 'li'
來判斷你想要觸發的元素，比如這裡，你想當鼠標對 li 執行了點擊或者劃過事件做某些事情時，可以這樣判斷。
或者換個寫法：
先給每一個 li 添加一個id 的屬性。然後這樣：
switch(target.id){
case 0:{
// do something
break;
}
case 1:{
// do something
break;
}
// ...
}
當點擊到對應 id 的 li 的時候就會響應對應的事件了。
那麼，要怎麼實現事件委托呢，先來上代碼，頁面結構還是上面的結構：
var list=document.getElementById("list");
var items=list.getElementsByTagName("li");
for(var i=0,len=items.length;i<len;i++){
items[i].id=i;
}
list.addEventListener('click',clickItem,false);
function clickItem(event){
var event=event||window.event;
var target=event.target||window.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
console.log(target.innerHTML);
}
}
是不是比較簡單呢，但是事件委托卻有一個很大的作用，就是提高頁面的性能，同時降低與頁面的耦合。
當你要給多個（好多個）元素綁定同一個事件時，就可以使用事件委托了，省卻了給每一個元素綁定的麻煩，還能提高性能，何樂而不為呢。
還有個好處就是，當你的頁面結構發生變化時，你也不用辛辛苦苦的變更事件的代碼了，因為事件是綁定在父層元素上，變動父層元素內的頁面結構不會影響事件的發生，因為事件流最終都會傳遞到父層元素的。