JS: 事件委托

事件委托在算是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 元素。