JS【详解】事件委托

事件委托的简介

事件委托（Event Delegation）是 JS 处理事件的一种技术：不直接在目标元素上设置事件监听器，而是在其父元素或祖先元素上设置监听器，然后利用事件冒泡机制来捕获和处理事件。

事件委托的好处

• 减少内存占用：不需要为每一个子元素单独绑定事件监听器，只需在父元素或祖先元素上绑定一个即可。这在处理大量动态添加或删除的子元素时特别有用，因为不需要每次添加或删除子元素时都重新绑定事件监听器。

• 简化代码：通过事件委托，可以使用更少的代码来处理多个元素的事件。

• 处理未来元素：即使在未来动态添加到DOM中的新元素，也会自动获得事件处理的能力，因为它们的事件也会冒泡到父元素或祖先元素。

事件委托的实现

1. 选择一个父元素或祖先元素作为事件监听器的目标。

2. 在该元素上添加一个事件监听器。

3. 在事件处理函数中，通过检查event.target或event.srcElement属性来确定实际触发事件的元素，并执行相应的操作。

document.querySelector('#parent-element').addEventListener('click', function(event) {  // 检查触发事件的元素是否是按钮  if (event.target.matches('button')) {  // 执行按钮点击事件的逻辑  alert('Button clicked!');  }  
});