如何使用事件委托而不是将事件侦听器分别附加到每个项目？

Rupali 发表于 Dev

101

鲁帕里

如何将此代码转换为事件委托？

这是HTML代码

<ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {

  let app = document.getElementById('todo-app');
  let items = app.getElementsByClassName('item');

  // attach event listener to each item
  for (let item of items) {
    item.addEventListener('click', function() {
      alert('you clicked on item: ' + item.innerHTML);
    });
  }

});

上面的代码在技术上有效，问题在于，将事件侦听器分别附加到每个项目。使用上述代码应用程序可能会导致数百个事件侦听器，更有效的解决方案是将一个事件侦听器实际附加到整个容器，然后在实际单击每个项目时便能够访问它们。

那么，如何使用事件委托来制作此代码？

罗德里戈·费雷拉

您需要了解的所有知识才能在纯Js中实现您所需要的一切，这是在此事件委派中-David Walsh

您的情况是：

document.getElementById("todo-app").addEventListener("click",function(e) {
	// e.target was the clicked element
  if (e.target && e.target.matches("li.item")) {
    console.log("List item clicked!");
  }
});

<ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

希望能帮助到你！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。