React 18 源码学习笔记 2 addEventListen

再次的，React 在 createRoot 时给传递的参数 (即 React 渲染的根结点) 挂载各种事件监听。

Screen Shot 2022-08-22 at 8.24.44 PM.png

React 将事件监听主要分为三种等级，有三种响应函数

1. dispatchDiscreteEvent，离散事件，例如 click, select, keyup, touchstart 等
2. dispatchContinuousEvent, 连续事件，例如 drag, dragover, scroll, pointermove, touchmove 等
3. dispatchEvent，其他事件，例如 abort

除此之外，还有其他接受 message 的事件。例如 IdleEventPriority

dispatchDiscreteEvent 和 dispatchContinuousEvent 最终还是会调用 dispatchEvent，从 dispatchEvent 到在 react element 上定义的响应函数 (例如: onClick)，还有一定的调用栈。

Screen Shot 2022-08-22 at 8.45.30 PM.png

生成的事件如下：

Screen Shot 2022-08-22 at 8.47.08 PM.png

需要注意的是，收到的还是SyntheticBaseEvent，即还是合成事件，

1. 此事件的 currentTarget 指向事件响应函数挂载的 DOM, target 指向触发事件的元素。
2. 事件中的 nativeEvent 才是原始的事件 PointerEvent，在 PointerEvent 中, currentTarget 指向 React Dom 的根元素。
3. 合成事件会在事件响应以后被清除 currentTarget. 从 MDN 可知，这是这也是 DOM 的行为，并非是 React 特异为止。