事件委托在算是JS里比较流行的技术了。它可以让我们添加监听器到父元素上，来避免监听每个子元素。下面我就用一个简单的例子来说明吧。
比如说现在一个列表里有几千个子元素：
1 <body> 2 <div id="container"> 3 <ul id="list"> 4 <li><a href="#">Item 1</a></li> 5 <li><a href="#">Item 2</a></li> 6 <li><a href="#">Item 3</a></li> 7 <li><a href="#">Item 4</a></li> 8 .................................. 9 <li><a href="#">Item 1000</a></li> 10 </ul> 11 </div> 12 </body>
如果我们遍历每个 <a> 元素然后一个一个监听事件的话那就瞬间爆炸了。当 JS 来创建这些元素的时候，页面就会变得很卡。
所以这就有了事件委托：当事件冒泡到 body 元素，我们可以使用 event.target 来检查是哪个元素被点击了。
1 document.addEventListener("click", function(e) { 2 if(e.target && e.target.nodeName == "A") { 3 console.log("List item ", e.target.textContent, " was clicked!"); 4 } 5 }); 6 7 // When we click the 2nd item, the page prints out: 8 9 "List item Item 2 was clicked!"
target vs currentTarget
既然我们说到了 event.target，那就再说说 JS 事件里另一个属性 event.currentTarget。看 JS 文档的话可能看得有点晕。
现在我们从上面例子看到当点击 a 元素时，click 事件就会冒泡到 <body> 节点，就像这样：
<a> → <li> → <ul> → <div> → <body>
现在多加一行代码打印出 e.currentTarget，来看看这是什么鬼。
1 document.addEventListener(“click”, function(e) { 2 if(e.target && e.target.nodeName == “A”) { 3 console.log(“List item “, e.target.textContent, “ was clicked!”); // "List item Item 2 was clicked!" 4 } 5 console.log(e.currentTarget); // #document 6 });
结果是它打印出了 "document" ，因为我们是在 document 上绑定的监听事件。而 e.target 指向的是我们点击的那个 <a> 元素。
我们再做一些改变来看看 target 和 currentTarget 的不同。这次，我们在 <ul> 里添加监听事件。
1 document.getElementById(“list”).addEventListener(“click”, function(e) { 2 console.log(e.currentTarget); //<ul><li>...</li><ul> 3 console.log(e.target); //<a href="#">Item 2</a> 4 );
我们可以得出结论：currentTarget 指向的是监听器直接绑定的那个元素，而 target 指向的是我们点击的那个元素。
有了 target 和 currentTarget 这两个属性，我们可以在事件触发的时候更简单地操作触发事件的 DOM 元素和绑定监听器的 DOM 元素。