背景

React SyntheticEvent的出现原因，大致上有三点：

1、跨平台

React 出现的意义之一就是跨平台，抹平不同浏览器之间的差异

这一点上 SyntheticEvent 是作为 React 的具体实现而诞生的

2、性能优化

如果在每个元素上有绑定事件，那么会带来大量的性能消耗

原生 JavaScript 的实现中有「事件委托」的优化方式

SyntheticEvent 的底层原理也是它，是对原生 DOM 事件上的一层封装

3、内部调度优化

SyntheticEvent 按照事件的紧急程度，把事件分为多个优先级，避免低优先级的事件阻塞渲染或者影响用户体验

如 DiscreteEvent （离散事件）、UserBlockingEvent（用户阻塞事件）、ContinuousEvent（连续事件）

如何找到源码调试的切入口？

我喜欢的调试方式是去启动项目，开performance跑一下
在这张图中，可以找到合成事件初始化的入口 listenToAllSupportedEvents
在这张图中，可以找到合成事件触发的入口 dispatchDiscreteEvent

具体实现

以下代码来源于React-DOM V17.0.2

关键代码的注释写在图片里的代码上一行

注册事件

listenToAllSupportedEvents

这一步是对所有原生的事件做一个遍历去执行注册监听的动作

如下图，所有的事件最终都会在root节点上注册监听

而 nonDelegated 的事件，无法冒泡委托，就只注册了捕获的事件，如scroll

listenToNativeEvent

addTrappedEventListener

passive可以参考官方文档

这一步最主要的事就是获取了带优先级的事件监听器，比如onClick就是调用的是dispatchDiscreteEvent

createEventListenerWrapperWithPriority

根据事件类型，在eventPriorities中定义了事件的优先级各类事件对应的优先级如下：

addEventBubbleListener / addEventCaptureListener

这一步就是真正挂载事件了

事件收集 & 触发

以click事件为例

事件的触发函数从dispatchDiscreteEvent开始，最核心的调用点就是这个dispatchEventsForPlugins

这中间的函数做了一些辅助操作，如：根据优先级调度、获取事件的关键属性...

dispatchEventsForPlugins

extractEvents$4

合成事件映射关系：

合成事件对象原型链上的preventDefault和stopPropagation(这两个方法都针对IE做了兼容)：

accumulateSinglePhaseListeners

这一步可以理解为从底往上的DFS

processDispatchQueue

processDispatchQueueItemsInOrder

为了模拟真实事件触发的顺序

捕获是倒序执行，冒泡是正序执行

错误处理

当我们在浏览器中执行 JavaScript 代码时，如果发生了错误，浏览器会触发一个 error 事件，并将错误对象作为参数传递给事件处理器。我们可以通过 window.addEventListener('error', handler) 来监听这个事件，并在 handler 函数中处理错误。

但是，如果我们直接执行回调函数，而不是通过事件机制，那么错误就不会被 error 事件捕获，而是直接抛出到全局作用域，可能导致整个应用崩溃。例如：

js 复制代码

function callback() {
  throw new Error('Something went wrong');
}

// 直接执行回调函数，错误不会被捕获
callback();

为了避免这种情况，React 使用了一个巧妙的技巧，就是通过一个 fakeNode 和一个自定义的事件来模拟事件机制，从而实现一个安全的调用回调函数的方法

FAQ

1、在 React17 之后，每一个 fiber 元素上都会绑定具体的捕获/冒泡事件吗

基本不会，但是在onClick的场景下会有一个额外的事件

trapClickOnNonInteractiveElement

这段代码是React合成事件系统的一部分，它用于解决移动Safari浏览器上的一个bug

这个bug导致非交互元素（如div或span）上的点击事件不会正确地冒泡，从而无法触发委托的点击监听器。

为了解决这个问题，这段代码给目标节点添加了一个空的点击监听器，这样就可以让点击事件正常地冒泡。

这个监听器是通过onclick属性设置的，而不是通过addEventListener方法，这样就不需要额外的管理工作。

这段代码还有一个TODO注释，表示可能只需要针对相关的Safari浏览器做这个处理，而不是所有的浏览器。

可能是你见过最好理解的 React17 合成事件 源码解读

背景