Skip to main content

Event delegation

事件代理（Event delegation）是一种 JavaScript 事件处理技术，它允许在祖先元素上代理处理所有子元素上的事件，而不是在每个子元素上单独附加事件监听器。事件代理背后的思想是，事件在冒泡阶段（bubble phase）从子元素传播到祖先元素，因此我们可以在祖先元素上捕获事件，然后根据事件源的特征（如事件类型、目标元素的类名等）来处理它。

好处​

  • 减少内存占用：如果为每个子元素添加事件监听器，可能会导致内存占用过多，因为每个监听器都需要内存来存储。
  • 动态绑定事件：当我们动态添加或删除子元素时，不需要重新绑定事件监听器，因为它们都由父元素处理。
  • 更少的事件处理器：如果子元素上的事件相同，则不需要为每个子元素编写相同的事件处理器。相反，它们都由祖先元素处理。

局限​

  • 首先，事件必须冒泡。而有些事件不会冒泡。此外，低级别的处理程序不应该使用 event.stopPropagation()。
  • 其次，委托可能会增加 CPU 负载，因为容器级别的处理程序会对容器中任意位置的事件做出反应，而不管我们是否对该事件感兴趣。但是，通常负载可以忽略不计，所以我们不考虑它。

例子​

<ul id="myList">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.style.backgroundColor = 'blue';
  }
});

References​