事件冒泡 • 月与羽

核心概念	事件从最具体的目标元素开始，逐层向上传播到根节点（document）的机制。
传播路径	目标元素 → 父元素 → 更高层级的祖先元素 → … → `document`
控制方法	使用 `event.stopPropagation()` 在任意层级中断事件的继续传播。
常见问题	在嵌套结构（如模态框、下拉菜单）中，点击内部元素会意外触发绑定在外层元素的事件。

阶段	说明	监听方式（addEventListener 第三个参数）
捕获阶段 (Capturing)	事件从 document 根节点开始，逐层向下传递到目标元素。	true
目标阶段 (Target)	事件到达目标元素，并触发其上绑定的监听器。	无需指定（与绑定时机有关）
冒泡阶段 (Bubbling)	事件从目标元素开始，逐层向上传递回 document 根节点。（默认监听阶段）	false 或省略

核心定义	将事件监听器绑定在父元素上，利用事件冒泡机制来统一管理和处理所有子元素的事件。
主要优点	1. 提升性能：大幅减少内存占用，无需为每个子元素绑定监听器。 2. 支持动态元素：对后续动态添加的子元素自动生效，无需重新绑定。 3. 简化代码：逻辑集中，易于维护。
实现关键	在父元素的事件监听器中，通过 `event.target` 属性判断事件的实际来源，并确保它是我们想要处理的目标子元素。
注意事项	1. 并非所有事件都会冒泡（如 `focus`、`blur`），这类事件不能使用委托。 2. 复杂结构中建议使用 `event.target.closest('selector')` 来更精准地匹配目标元素。

属性名、	含义	示例说明
`event.target`	事件的最初触发者。无论事件传播到哪一层，它始终指向实际被点击的那个最深层元素。	假设点击 `<ul>` 中的 `<li>`，当事件冒泡到 `<ul>` 时，`event.target` 仍然是那个被点击的 `<li>`。
`event.currentTarget`	当前正在处理事件的元素。即事件监听器被绑定在哪个元素上，它就指向哪个元素。	假设点击 `<li>`，当事件冒泡到 `<ul>` 时，`event.currentTarget` 指向的是 `<ul>`。