React中点击内部元素时外层addEventListener先执行的原因

核心原因是React事件系统和原生DOM事件的执行时机不同，你对冒泡阶段的理解没错，但两者的处理逻辑不在同一个执行链路里：

1. 原生DOM事件的直接绑定逻辑 #

你通过addEventListener给外层div绑定的点击事件，是直接挂载到真实DOM元素上的，默认处于冒泡阶段（第三个参数省略时默认false）。当点击内部div时，事件从目标元素（内部div）向上冒泡，首先到达外层div，触发这个原生事件处理器，所以先打印OUTER ELEMENT。

2. React事件的委托机制 #

React的onClick并不是直接绑定在对应的DOM元素上，而是采用事件委托机制：所有React事件都会被统一委托到应用的根节点（比如document或React挂载的根容器）。只有当原生事件冒泡到这个根节点时，React才会启动自己的事件处理流程，模拟事件的冒泡/捕获顺序，这时才会执行内部div的onClick，打印INNER ELEMENT。

3. 完整执行顺序拆解 #

点击内部div后，事件传播的完整流程是：

• 原生事件进入捕获阶段：从document向下遍历到目标元素，这里没有绑定捕获事件，无动作
• 原生事件到达目标阶段：触发内部div的原生点击事件（但React的onClick不在这里执行）
• 原生事件进入冒泡阶段：
  • 先冒泡到外层div，触发你绑定的原生处理器 → 打印OUTER ELEMENT
  • 继续冒泡到React根节点，React事件系统接管，处理收集到的事件队列
  • React模拟冒泡过程，执行内部div的onClick → 打印INNER ELEMENT

验证：修改代码对比效果 #

如果给外层div也加上React的onClick，会看到React自己模拟的冒泡顺序：先内层后外层，而原生事件依然最先触发：

export const Test = () => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const currentRef = ref.current;
        if (!currentRef) return;
        const handler = (e) => console.log("OUTER ELEMENT (原生)");
        currentRef.addEventListener("click", handler);
        return () => currentRef.removeEventListener("click", handler);
    });

    return (
        <div ref={ref} onClick={() => console.log("OUTER ELEMENT (React)")}>
            <div onClick={() => console.log("INNER ELEMENT")}>
                INNER
            </div>
            OUTER
        </div>
    );
};

点击后打印顺序为：
OUTER ELEMENT (原生) → INNER ELEMENT → OUTER ELEMENT (React)

内容的提问来源于stack exchange，提问作者cnfw