事件冒泡是子元素触发事件后自动向父元素逐级传播的过程；外层元素需绑定相同事件监听器且不被stoppropagation()阻止，才能响应冒泡。
事件冒泡是 JavaScript 中默认的事件传播机制：当子元素触发事件时，该事件会从目标元素逐级向上传播到父元素、祖先元素，直至 document。要让外层元素响应这个冒泡过程，关键不是“捕获”冒泡（冒泡本身自动发生），而是**在外层元素上正确绑定事件监听器，并确保不被阻止**。
监听外层元素的同一事件类型
外层元素必须监听与子元素触发的相同事件（如 click、input），且监听器需在冒泡阶段执行（这是默认行为）。
- 直接在父元素上写
onclick="handler()"或用element.addEventListener('click', handler)即可捕获冒泡事件 - 避免使用
addEventListener('click', handler, true)（第三个参数为true表示捕获阶段），否则它会在冒泡前就触发，可能不符合“响应冒泡”的预期 - 示例：点击按钮触发，其父
<div> 的 click 监听器会自然收到该事件 <h3>检查是否被 <code>event.stopPropagation()阻断如果中间某层调用了
event.stopPropagation()，冒泡就会中断，外层元素收不到事件。- 排查子元素或中间父元素的事件处理函数中是否有
event.stopPropagation()或return false（后者在 jQuery 中等效于阻止冒泡和默认行为） - 若需局部阻止但保留外层响应，改用
event.stopImmediatePropagation()（仅阻止同级其他监听器，不影响冒泡）或去掉阻止语句
确认元素层级关系与事件支持
并非所有事件都冒泡，也并非所有元素都天然承载事件。
- 常见冒泡事件有：
click、mousedown、keydown、input等；而focus、blur、load默认不冒泡（可用focusin/focusout替代） - 确保外层元素是子元素的真正祖先（DOM 树中存在包含关系），且未被
display: none或pointer-events: none影响事件接收（后者会使元素不响应任何鼠标事件）
利用
event.target和event.currentTarget区分来源外层监听器执行时，可通过这两个属性判断事件源头，实现精准响应。
-
event.target指最初触发事件的最深子元素（比如你点的是按钮内部的 span） -
event.currentTarget指当前绑定监听器的元素（即外层 div） - 常用于委托：在 ul 上监听 click，通过
if (e.target.tagName === 'LI')判断是否点中了某个 li
- 排查子元素或中间父元素的事件处理函数中是否有
