同一元素上Native Event与Synthetic Event的执行顺序疑问

在你的测试代码中，React的onClickCapture（合成捕获事件）比绑定在同一元素上的原生捕获事件先触发，核心原因在于React事件系统的事件委托机制和事件流处理逻辑，具体拆解如下：

1. React事件系统的核心：事件委托 #

React并没有将事件直接绑定在目标DOM元素上，而是采用事件委托策略：将所有类型的事件统一绑定在组件挂载的根节点（如#root）上。当浏览器触发事件时，根节点的事件处理器会先捕获到事件，随后React内部模拟一套完整的事件流（捕获→目标→冒泡），遍历组件树找到对应的事件处理器并执行。

2. 事件流的执行顺序逻辑 #

当你点击#e元素时，浏览器的原生事件流会先进入捕获阶段，从根节点自上而下传递到目标元素：

• 首先触发根节点上React注册的捕获事件处理器；
• React接收到事件后，开始遍历组件树的捕获阶段，执行#a元素的onClickCapture合成事件（即打印react a）；
• 浏览器的原生事件流继续向下传递，当到达#a元素时，触发你通过addEventListener绑定的原生捕获事件（打印dom a）。

简单来说，React的合成捕获事件是通过根节点的事件委托提前介入了事件流，在浏览器触发目标元素的原生捕获事件之前，就已经执行了对应的合成事件处理器。

3. 绑定时机的补充说明 #

你的原生事件是在useEffect中绑定的，useEffect的回调会在组件挂载完成（DOM渲染完毕）后执行。而React的事件委托是在组件挂载过程中就完成了注册，即便你将原生事件的绑定时机提前到useLayoutEffect（DOM渲染后立即执行），也不会改变顺序——因为React的根节点事件处理器早已在事件流的上游等待触发。

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