事件委托，说白了就是本来你要给一个元素添加一个事件（比如点击），出于某些考率，现在要把事件添加给它的外层元素。
事件源
解释事件委托之前，应该先了解下事件源。简单来说，事件源就是直接触发事件的元素。在事件函数中可通过event对象的target属性访问事件源。
看一个例子：
图中，单击span部分，控制台会打印出对应span元素；单击span外的p部分，会打印出对应p元素；单击p外的div部分，会打印出对应div元素。
关键代码如下：
1 <body>
2 <div id="box">div
3 <p>p
4 <span>span</span>
5 </p>
6 </div>
7 </body>
8 <script>
9 window.onload=function(){
10 var box=document.getElementById("box");
11 box.onclick=function(ev){
12 console.log((ev || window.event).target);
13 };
14 </script> 事件委托
再说事件委托。通常，我们用事件委托解决两问题：1、避免不必要的性能开销；2 、新生成的元素不需要重新添加事件。
先看一个经典的例子：
例子中，我们希望点击li能打印对应的文本。
1 <body>
2 <ul id="list">
3 <li>red</li>
4 <li>green</li>
5 <li>blue</li>
6 <li>pink</li>
7 <li>black</li>
8 </ul>
9 </body>
10 <script>
11 var list=document.getElementById("list");
12 var lis=document.querySelectorAll("li");
13
14 for(var i=0;i<lis.length;i++){
15 lis[i].onclick=function(){
16 console.log(this.firstChild.nodeValue); //本来单击li，可以打印出其对应文本
17 };
18 }
19
20 list.innerHTML+='<li>yellow</li>'; //这里加了一行后，单击li就无法打印出li对应文本了
21 </script> 本来，单击li是可以在控制台打印对应文体的。但是，现在20行加了一行代码，单击li就无法打印出li对应文本了。因为innerHTML会将原有内容全部清空，再赋予新内容，所以li绑定的单击事件也将失效。类似这种情况的还有，使用cloneNode()，新节点不会复制源节点的事件；jQuery中通过remove()移除的节点，重新添加回来后，之前绑定的事件将失效。（PS：detach()在这点上与remove()不同。）
下面，我将上面代码中的for循环换成以下代码：
1 list.onclick = function(ev){
2 var ev = ev || window.event;
3 if(ev.target.tagName.toLowerCase()=='li'){
4 console.log(ev.target.innerHTML); //单击li，即事件源是li是打印出其对应文本
5 }
6 }; 这样就解决了刚才遇到的问题，而且避免了使用for循环。其实，在这个解决方案中，我们是把点击事件绑定在了li的父级元素ul身上，也就是所谓的事件委托。然后对事件源进行判断，等于间接地给li添加了点击事件。
本作品采用知识共享署名 4.0 国际许可协议进行许可。