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