事件冒泡使事件从目标元素向上逐级传播，事件委托则利用该机制在父元素统一处理子元素事件，提升性能并支持动态元素。
JavaScript中的事件委托和事件冒泡是DOM事件处理中非常核心的概念，理解它们能帮助我们写出更高效、更灵活的代码。
事件冒泡机制
事件冒泡是指当一个元素触发某个事件（如click）时，该事件会从最内层被触发的元素开始，逐级向上传播到父元素，直到document根节点。比如点击一个嵌套在多个div中的按钮，click事件会依次经过按钮 → 父div → body → html → document。
这种传播机制允许我们在祖先元素上监听子元素的事件。
关键点：- 事件从目标元素向上冒泡至根节点
- 可以通过 event.stopPropagation() 阻止冒泡
- 默认情况下大多数事件都会冒泡
事件委托的原理
事件委托利用了事件冒泡的特性，将事件监听器绑定在父元素上，通过判断 event.target 来识别实际触发事件的子元素，从而实现对多个子元素的统一管理。
立即学习“Java免费学习笔记（深入）”；
例如，一个动态添加的列表项如果每个都绑定事件，不仅浪费性能，还需要每次新增时重新绑定。而使用事件委托，只需给父容器绑定一次监听器即可。
- 动态生成的元素需要响应事件
- 大量相似子元素（如表格行、菜单项）
- 提高性能，减少内存占用
实际代码示例
以下是一个使用事件委托处理无序列表点击的例子：
const list = document.getElementById('myList');
list.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了:', e.target.textContent);
}
});
即使后续通过JavaScript动态添加新的
- 上，依赖的是冒泡机制。
- 确保选择器判断准确，避免误触发（比如用 e.target.matches('.btn') 更安全）
- 某些事件不冒泡（如 focus、blur），可使用 focusin/focusout 替代
- 不要过度阻止冒泡，以免影响其他功能模块
注意事项与技巧
虽然事件委托很强大，但也需要注意一些细节：
合理结合事件冒泡和事件委托，可以让事件系统更加简洁可控。
基本上就这些。
