当你在 React 项目里尝试用事件委托统一处理子组件的交互时常常会被一些“静默”事件给拦住——比如你给 ` ` 绑定了 `focus`，却永远收不到任何日志。老实说，

为什么会出现这种痛点？

DOM 事件有三个传播阶段：捕获、目标和冒泡。大多数我们使用的监听器只会在冒泡阶段触发。但并非所有事件都支持冒泡。

说到以代码为例。

useEffect => {
document.body.addEventListener('focus',e => {
console.log;},{ capture: false });document.body.addEventListener('click',e => {
console.log;},{ capture: false });},)，// JSX
 console.log}
onClick={e => console.log}
/>

点击输入框后你会看到控制台输出：

input focus
input click
body click

其中 `body click` 能被捕获是因为 `` 支持冒泡；而 `body focus` 永远不会出现，因为 `` 本身就不冒泡。这让你在父容器上使用事件委托来监听聚焦状态变得无效。

哪些 DOM 事件不支持冒泡？

• 焦点相关：
  • `focus` / `blur` → 对应的冒泡版本是 `focusin` / `focusout`。
• 鼠标进入/离开：
  • `mouseenter` / `mouseleave` → 替代为 `mouseover` / `mouseout` 并结合 `event.relatedTarget` 判断。老实说，
• 资源加载与错误：
  • `load`。`error`,`abort`。
• 滚动相关：
  • `scroll`，但 `` / `` 会冒泡。
• 媒体播放：
  • `play`。 `pause`,`ended`,等。
• 其它现代事件：

React 使用者注意：合成事件如 ``、 `` 等一样映射到原生的不冒泡事件，故也不会触发父级的委托监听。

三种实用监听方案

. 使用可冒泡的替代事件

If spec provides a bubbling counterpart,just switch to it.

// 原始写法：无法捕获 body 的聚焦
document.body.addEventListener;// 替换为可冒泡的 focusin
document.body.addEventListener;// 同理，将 mouseenter 改为 mouseover
container.addEventListener;

React 中可以直接使用原生事件绑定，也可以通过第三方库实现；注意 React 没有提供 ``，但有对应的捕获版本 ``。

. 捕获阶段拦截

所有 DOM 事件都会经过捕获阶段，从顶层向下传播到目标。只需开启捕获模式，即可在父元素上提前收到通知。老实说，

// 开启捕获模式
document.body.addEventListener;

React 合成事件一样支持捕获，例如：

This triggers during capture phase before event reaches input.

. 针对目标元素单独绑定

If you have a limited number of elements or can obtain m via refs。binding each one directly guarantees reliability.

const inputRef = useRef;不过，useEffect => {
inputRef.current?.addEventListener;},)，return ;

This approach scales well for dynamic lists—attach listeners when elements are created instead of relying solely on delegation.

与实战提示

1. Mistakes often stem from assuming every event bubbles—check if event supports bubbling first.
2. If an event has a bubbling alternative,prefer that over complex workarounds.
3. The capture phase is a universal fallback—turn third argument of addEventListener to true or use React’s on…怎么说呢，Capture props.
4. If you’re still stuck and performance isn’t critical。bind listeners directly to target elements via refs or during creation.

You’ll save countless debugging hours by understanding se propagation quirks and choosing right strategy for each scenario. Happy coding!