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

Question

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

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

});

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

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

Answer 1

在纯 Js 中实现你想要的所有你需要知道的是这篇文章Event Delegation - 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>

希望对你有帮助！

Answer 2

这个怎么样，ul上的绑定事件

document.addEventListener('DOMContentLoaded', function() {
  let app = document.getElementById('todo-app');
  let items = app.getElementsByClassName('item');

  app.onclick = function(e){
    alert('you clicked on item: ' + e.target.innerHTML);
  }
});

<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>

Answer 3

jQuery 非常适合用于事件委托情况。您只需要将侦听器附加到父元素，并指定将委托事件的子类型元素：

    $( "#todo-app" ).on( "click", "li", function( event ) {
        event.preventDefault();
        console.log( $( this ).text() );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>