事件委托的简介

事件委托（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!');  
    }  
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.