时间戳

首页 > 解决方案 > 如何使用事件委托而不是将事件侦听器单独附加到每个项目？

javascript - 如何使用事件委托而不是将事件侦听器单独附加到每个项目？

问题描述

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

这是 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);
    });
  }

});

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

那么，如何使用事件委托制作这段代码呢？

标签： javascript

解决方案

在纯 Js 中实现您想要的所有你需要知道的是这篇文章事件委托 - 大卫沃尔什

你的情况是：

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>

希望能帮助到你！

推荐阅读