React 事件机制

react合成事件( Synethic Event )，不是原生事件

合成事件与原生事件的区别

1. 写法不同，合成事件是驼峰写法，而原生事件是全部小写
2. 执行时机不同，合成事件全部委托到document上，而原生事件绑定到DOM元素本身
3. 合成事件中可以是任何类型，比如this.handleClick这个函数，而原生事件中只能是字符串

react事件机制分为两个部分：1、事件注册 2、事件分发

1.事件注册部分，所有的事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发

2.事件分发部分，首先生成合成事件，注意同一种事件类型只能生成一个合成事件Event，如onclick这个类型的事件，dom上所有带有通过jsx绑定的onClick的回调函数都会按顺序（冒泡或者捕获）会放到Event._dispatchListeners 这个数组里，后面依次执行它。

总的来说，整个click事件被分发的过程就是：
1、用EventPluginHub生成合成事件，这里注意同一事件类型只会生成一个合成事件，里面的_dispatchListeners里储存了同一事件类型的所有回调函数

2、按顺序去执行它

react合成事件执行过程

分析合成事件执行过程：

React不会将事件处理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层（Document），使用一个统一的事件监听器。这个监听器维持了一个映射，保存所有组件内部的事件监听和处理函数。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。

一 事件注册

所有事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发

二 事件合成

从原生的nativeEvent对象生成合成事件对象，同一种事件类型只能生成一个合成事件Event，如onclick这个类型的事件，dom上所有带有通过jsx绑定的onClick的回调函数都会按顺序（冒泡或者捕获）会放到Event._dispatchListeners 这个数组里，后面依次执行它

三 事件派发

每次触发事件都会执行根节点上 addEventListener 注册的回调，也就是 ReactEventListener.dispatchEvent 方法，事件分发入口函数。该函数的主要业务逻辑如下：
1. 找到事件触发的 DOM 和 React Component
2. 从该 React Component，调用 findParent 方法，遍历得到所有父组件，存在数组中。
3. 从该组件直到最后一个父组件，根据之前事件存储，用 React 事件名 + 组件 key，找到对应绑定回调方法，执行，详细过程为：
4. 根据 DOM 事件构造 React 合成事件。
5. 将合成事件放入队列。
6. 批处理队列中的事件（包含之前未处理完的，先入先处理）

React合成事件的冒泡并不是真的冒泡，而是节点的遍历。