事件冒泡是事件从目标元素逐级向上传播至根节点的过程，事件代理利用此机制将事件绑定到父元素，通过判断event.target实现子元素事件处理，减少内存占用并支持动态元素。
JavaScript事件代理利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是每个子元素单独绑定。这样既能减少内存占用，又能动态支持新增元素的事件响应。
事件冒泡是什么
事件冒泡是指当某个元素上的事件被触发时，该事件会从最内层的目标元素开始，逐级向上传播到父元素，直到根节点（如document）为止。比如点击一个按钮，这个点击事件会先作用于按钮本身，然后依次触发其父容器、祖父容器的同类型事件（如果绑定了的话）。
例如：HTML结构如下：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
立即学习“Java免费学习笔记（深入）”；
当你点击某个 li 元素时，事件首先发生在 li 上，然后冒泡到 ul，再继续向上。
事件代理的核心原理
由于事件会冒泡，我们可以把事件监听器绑定在共同的祖先元素上，在回调函数中通过 event.target 判断实际触发事件的元素，从而执行对应逻辑。
好处包括：
- 减少事件绑定数量，提升性能
- 无需为动态添加的元素重新绑定事件
- 简化代码维护
如何实现事件代理
以点击列表项为例：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
console.log('Clicked on:', e.target.textContent);
}
});
这里只给 ul 绑定了一个事件监听器，但能响应所有 li 的点击。即使后续通过JavaScript新增了 li 元素，也能正常工作。
注意事项
不是所有事件都会冒泡。例如 focus、blur、mouseenter、mouseleave 不冒泡。若需代理这类事件，可使用对应冒泡版本（如 focusin 和 focusout）。
确保理解 e.target（真正触发的元素）与 this 或 e.currentTarget（绑定监听器的元素）的区别。
基本上就这些。掌握事件代理和冒泡机制，能让事件管理更高效、更灵活。不复杂但容易忽略细节。
