事件委托利用事件冒泡将子元素的事件绑定到父元素上，通过event.target识别触发元素，实现高效事件处理。例如为ul绑定点击事件，可捕获所有li的点击行为，即使后续动态添加的li也能生效。相比为每个子元素单独绑定，事件委托减少内存占用、提升性能、便于维护，尤其适用于列表、表格等大量动态子元素场景。注意并非所有事件都冒泡，如focus、blur需用focusin、focusout替代，并确保条件判断准确以避免误触发。掌握事件委托可使代码更轻量灵活。
事件委托（Event Delegation）是JavaScript中一种高效处理事件的机制，它的核心思想是利用事件冒泡特性，将子元素的事件监听绑定到其父元素上，由父元素统一处理。
什么是事件冒泡？
在DOM中，当一个元素触发事件时，该事件会从目标元素开始，逐级向上传播到根节点。比如点击一个按钮，事件会先在按钮上触发，然后依次向上触发其父容器、body、html等。
正是这种冒泡行为，让父元素有机会“捕获”子元素的事件。
为什么需要事件委托？
直接为每个子元素绑定事件监听器会带来性能问题，尤其是当页面中有大量动态添加或删除的元素时：
立即学习“Java免费学习笔记（深入）”；
- 内存占用高：每个监听器都占用内存
- 维护困难：新增元素需重新绑定事件
- 初始化慢：批量绑定耗时
事件委托通过只绑定一次事件到父级，解决上述问题。
如何实现事件委托？
关键在于使用event.target来判断事件实际发生在哪个子元素上。
示例：为一个列表的所有元素添加点击效果，但只在
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了:', e.target.textContent);
}
});
这样即使后续通过JavaScript动态添加新的，点击依然能被正确处理，无需重新绑定。
适用场景与注意事项
事件委托特别适合以下情况：
- 列表项、表格行等大量相似子元素
- 内容频繁动态更新的容器
- 简化事件管理，减少监听器数量
需要注意的是，并非所有事件都会冒泡（如focus、blur），但可以通过使用focusin/focusout来替代。同时要确保逻辑判断准确，避免误处理不需要响应的元素。
基本上就这些。掌握事件委托，能让代码更轻量、更灵活。
