如何理解JavaScript中的事件委托机制？

事件委托利用事件冒泡将子元素的事件绑定到父元素上，通过event.target识别触发元素，实现高效事件处理。例如为ul绑定点击事件，可捕获所有li的点击行为，即使后续动态添加的li也能生效。相比为每个子元素单独绑定，事件委托减少内存占用、提升性能、便于维护，尤其适用于列表、表格等大量动态子元素场景。注意并非所有事件都冒泡，如focus、blur需用focusin、focusout替代，并确保条件判断准确以避免误触发。掌握事件委托可使代码更轻量灵活。

事件委托（Event Delegation）是JavaScript中一种高效处理事件的机制，它的核心思想是利用事件冒泡特性，将子元素的事件监听绑定到其父元素上，由父元素统一处理。

什么是事件冒泡？

在DOM中，当一个元素触发事件时，该事件会从目标元素开始，逐级向上传播到根节点。比如点击一个按钮，事件会先在按钮上触发，然后依次向上触发其父容器、body、html等。

正是这种冒泡行为，让父元素有机会“捕获”子元素的事件。

为什么需要事件委托？

直接为每个子元素绑定事件监听器会带来性能问题，尤其是当页面中有大量动态添加或删除的元素时：

• 内存占用高：每个监听器都占用内存
• 维护困难：新增元素需重新绑定事件
• 初始化慢：批量绑定耗时

事件委托通过只绑定一次事件到父级，解决上述问题。

如何实现事件委托？

关键在于使用event.target来判断事件实际发生在哪个子元素上。

示例：为一个列表的所有

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});