JS: 事件委托

本文翻译：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 元素。

target vs currentTarget

猜你喜欢