事件冒泡是指事件从目标元素逐级向上传播至根节点的过程，事件委托利用该机制将事件绑定在父元素上，通过判断event.target实现统一处理；这样做可减少内存占用、提升性能，并支持动态添加的子元素；例如为ul绑定点击事件，通过e.target.tagName或matches()方法识别具体触发元素，避免对每个li重复绑定；需注意并非所有事件都冒泡，如focus、blur等，但可用focusin、focusout替代，同时应防止过度委托导致误触发；此技术显著优化了大规模或动态列表的事件管理效率。
JavaScript事件委托利用事件冒泡机制，把事件处理程序绑定在父元素上，而不是每个子元素单独绑定。这样做可以提升性能，减少内存占用，还能动态支持新增的子元素。
什么是事件冒泡
当一个元素触发事件时，事件会从最内层目标元素开始，逐级向上传播到父元素，直到document或window。比如点击一个按钮，如果它的父、祖父元素都绑定了相同的事件类型（如click），这些祖先元素也会依次响应。
这个“向上冒泡”的过程就是事件冒泡。利用这个特性，我们可以在祖先节点上监听事件，判断事件源头（event.target），实现统一处理。
事件委托的核心原理
不是给每一个子元素绑定事件，而是把事件绑定在它们共同的父容器上。通过检查event.target来识别具体是哪个子元素触发了事件。
立即学习“Java免费学习笔记（深入）”；
- 减少重复的事件监听器，节省内存
- 对动态添加的元素依然有效，无需重新绑定
- 简化代码维护，逻辑集中
例如一个列表有几十个li，如果每个都绑定click，效率低。改用事件委托后，只需给ul绑定一次。
如何实现事件委托
使用addEventListener监听父元素，再通过event.target匹配实际点击的元素。
示例代码：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击的是：', e.target.textContent);
}
});
这段代码监听ul#list的点击，当用户点中某个li时，通过判断e.target.tagName执行对应操作。
也可以用matches()方法判断选择器，更灵活：
if (e.target.matches('.item')) {
// 处理类名为 item 的元素
}
注意边界情况
并不是所有事件都会冒泡，比如focus、blur、load等。但可以通过绑定focusin和focusout来模拟冒泡行为。
同时要避免过度委托，确保父元素不会因为其他无关区域点击而误触发。
基本上就这些。掌握事件冒泡和事件委托，能让事件管理更高效，尤其在处理大量动态元素时特别有用。
