JS【详解】事件委托
事件委托的简介
事件委托（Event Delegation）是 JS 处理事件的一种技术：不直接在目标元素上设置事件监听器，而是在其父元素或祖先元素上设置监听器，然后利用事件冒泡机制来捕获和处理事件。
事件委托的好处
-
减少内存占用：不需要为每一个子元素单独绑定事件监听器，只需在父元素或祖先元素上绑定一个即可。这在处理大量动态添加或删除的子元素时特别有用，因为不需要每次添加或删除子元素时都重新绑定事件监听器。
-
简化代码：通过事件委托，可以使用更少的代码来处理多个元素的事件。
-
处理未来元素：即使在未来动态添加到DOM中的新元素，也会自动获得事件处理的能力，因为它们的事件也会冒泡到父元素或祖先元素。
事件委托的实现
-
选择一个父元素或祖先元素作为事件监听器的目标。
-
在该元素上添加一个事件监听器。
-
在事件处理函数中，通过检查event.target或event.srcElement属性来确定实际触发事件的元素，并执行相应的操作。
document.querySelector('#parent-element').addEventListener('click', function(event) { // 检查触发事件的元素是否是按钮 if (event.target.matches('button')) { // 执行按钮点击事件的逻辑 alert('Button clicked!'); }
});