刚开始接触到事件委托这个概念，还是看javascritp高级程序设计接触到的（js学习必备的书有木有）。
知道了什么是事件冒泡机制，（事件捕获因为不常用就不说了），然后明白了为什么会有事件委托的产生，其实在学习html的时候，就应该明白一个网页不只是平面的，更是立体的，一个页面实际的空间比我们眼睛看到的还要多的多，就像隐藏在海平面下的冰山一样。
如果明白了网页是立体的就好理解为什么有事件冒泡这个东西了。当你鼠标点击或者划过的时候，并不只是点击了最上面的一层，在这个点击的地方重叠的所有元素其实都被点击了。那我们怎么区分点击的是哪个呢，哪个该对点击这个事件响应呢，所以就有了冒泡这个东西，我每次都从最底层向上跑，都跑一遍，匹配到哪一个哪一个元素就响应。
在这个过程中通过event.target来判断，
假设有一个这样的结构：
1 <ul id="list"> 2 <li>111</li> 3 <li>222</li> 4 <li>333</li> 5 <li>444</li> 6 </ul>
你可以通过
var target=event.target;
target.nodeName.toLowerCase() == 'li'
来判断你想要触发的元素，比如这里，你想当鼠标对 li 执行了点击或者划过事件做某些事情时，可以这样判断。
或者换个写法：
先给每一个 li 添加一个id 的属性。然后这样：
1 switch(target.id){ 2 case 0:{ 3 // do something 4 break; 5 } 6 case 1:{ 7 // do something 8 break; 9 } 10 // ... 11 }
当点击到对应 id 的 li 的时候就会响应对应的事件了。
那么，要怎么实现事件委托呢，先来上代码，页面结构还是上面的结构：
1 var list=document.getElementById("list"); 2 var items=list.getElementsByTagName("li"); 3 for(var i=0,len=items.length;i<len;i++){ 4 items[i].id=i; 5 } 6 list.addEventListener('click',clickItem,false); 7 function clickItem(event){ 8 var event=event||window.event; 9 var target=event.target||window.srcElement; 10 if(target.nodeName.toLowerCase() == 'li'){ 11 console.log(target.innerHTML); 12 } 13 }
是不是比较简单呢，但是事件委托却有一个很大的作用，就是提高页面的性能，同时降低与页面的耦合。
当你要给多个（好多个）元素绑定同一个事件时，就可以使用事件委托了，省却了给每一个元素绑定的麻烦，还能提高性能，何乐而不为呢。
还有个好处就是，当你的页面结构发生变化时，你也不用辛辛苦苦的变更事件的代码了，因为事件是绑定在父层元素上，变动父层元素内的页面结构不会影响事件的发生，因为事件流最终都会传递到父层元素的。