基本思路：
冒泡机制+target（时间真正触发者）即理解为：
借助e.target和冒泡机制把事件绑定在父元素之上，事件由父元素来监听，由子元素来触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="li">li1</li> 10 <li>22</li> 11 <li class="li">33</li> 12 <li>44</li> 13 <li class="li">55</li> 14 </ul> 15 16 17 <script> 18 var ul=document.getElementsByTagName(‘ul‘).item(0); 19 ul.onclick=function (e) { 20 if(e.target.className.indexOf(‘li‘)>-1){//这里只是做了一个简单的操作，只检测li;若出现lii;lii；lia等元素，则需要拆分元素进行细节上的判断 21 e.target.style.color=‘pink‘; 22 } 23 }; 24 </script> 25 26 </body> 27 </html>
效果图
即使在JS中加入如下代码同样能有实现点击效果
1 var newLi = document.createElement(‘li‘); 2 newLi.className = ‘li‘; 3 newLi.innerHTML = ‘li7‘; 4 ul.appendChild(newLi);
与传统写法的比较：
1 <script> 2 var li = document.getElementsByClassName(‘li‘); 3 var ul = document.getElementsByTagName(‘ul‘).item(0); 4 for (var i = 0; i < li.length; i++) { 5 li[i].onclick = function () { 6 this.style.color=‘red‘; 7 } 8 } 9 var newLi = document.createElement(‘li‘); 10 newLi.className=‘li‘; 11 newLi.innerHTML=‘li7‘; 12 ul.appendChild(newLi); 13 </script>
传统写法虽然同样能够实现效果，但有多少个元素就需要绑定多少次事件，很消耗性能。并且for遍历的是死的类名，无法将事件绑定给后添加的元素；事件委托则在绑定事件上仅一步操作，未来添加的元素不论有多少同样能够具有之前的事件。
事件委托（事件代理）优点：
（1）性能上的优化；
（2）后添加额元素也可以执行之前的绑定函数
（3）后期优化是经常会用到，比较重要。
end
原文：http://www.cnblogs.com/ilaozhao/p/6475939.html