弄懂事件委托

最新推荐文章于 2024-07-10 14:47:48 发布

转载最新推荐文章于 2024-07-10 14:47:48 发布 · 92 阅读

本文探讨了事件委托的概念，一种提高事件监听效率的技术。通过实例对比，展示了如何将单一事件监听器绑定到父元素，而非每个子元素，从而显著提升大型应用的性能。

事件委托，也叫事件委派，事件代理。

当构建应用程序时，有时需要将事件监听器绑定到页面上的某些元素上，以便在用户与元素交互时执行某些操作。

假设我们现在有一个无序列表：

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

我们需要在 <li>上绑定点击事件，我们可能会这样操作：

app = document.getElementById('todo-app');	
let items = app.getElementsByClassName('item');	
	
// 将事件侦听器绑定到每个列表项	
for (let item of items) {	
  item.addEventListener('click', function() {	
    alert('you clicked on item: ' + item.innerHTML);	
  });	
}

虽然这样可以实现功能，但问题是要单独将事件侦听器绑定到每个列表项。这是4个元素，没什么大问题，但如果列表中有10,000个事项，怎么办？这个函数将会创建10,000个独立的事件监听器，并将每个事件监听器绑定到 DOM 。这样代码执行的效率非常低下。

更高效的解决方案是将一个事件侦听器实际绑定到父容器 <ul>上，然后在实际单击时可以访问每个确切元素。这被称为事件委托，并且它比每个元素单独绑定事件的处理程序更高效。

那么上面的代码可以改变为：

let app = document.getElementById('todo-app');	
	
// 事件侦听器绑定到整个容器上	
app.addEventListener('click', function(e) {	
  if (e.target && e.target.nodeName === 'LI') {	
    let item = e.target;	
    alert('you clicked on item: ' + item.innerHTML);	
  }	
});