基本思路：
冒泡机制+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