react的事件机制（合成事件）

一、react的事件机制

• react自身实现了一套事件机制，包括事件的注册、事件的存储、事件的合成及执行等
• react的所有事件并没有绑定到具体的dom节点上而是绑定在了document上，然后由统一的事件处理程序来派发执行
• 通过这种处理，减少了事件注册的次数，另外react还在事件合成过程中，对不同浏览器的事件进行了封装处理，抹平浏览器之间的事件差异。

二、对合成事件的理解

1. 对原生事件的封装

react会根据原生事件类型来使用不同的合成事件对象，比如:聚焦合成事件对象          syntheticFoucsEvent(合成事件对象:syntheticEvent是react合成事件的基类，定义了合成事件的基础公共属性和方法。合成事件对象就是在该基类上创建的)

    2. 不同浏览器事件的兼容的处理

  在对事件进行合成时，react针对不同的浏览器，也进行了事件的兼容处理
 

三、事件机制的流程

1.事件注册

在组件挂载阶段，根据组件内声明的事件类型-onclick，onchange等，给document上添加事件-addEventListener，并指定统一的事件处理程序dispatchEvent 。
 

2.事件存储

完成事件注册后，将react dom，事件类型，事件处理函数 fn放入数组存储，组件挂载完成后，经过遍历把事件处理函数存储到listenerBank(一个对象)中，缓存起来，为了在触发事件的时候可以查找到对应的事件处理方法去执行。

开始事件的存储，在react里所有事件的触发都是通过 dispatchEvent方法统一进行派发的，而不是在注册的时候直接注册声明的回调，来看下如何存储的。
react把所有的事件和事件类型以及react组件进行关联，把这个关系保存在了一个map里，也就是一个对象里(键值对)，然后在事件触发的时候去根据当前的组件id和事件类型查找到对应的事件fn
 

3.事件执行

1、进入统一的事件分发函数( dispatchEvent )
2、结合原生事件找到当前节点对应的ReactDOMComponent对象

3、开始事件的合成

• 根据当前事件类型生成指定的合成对象。
• 封装原生事件和冒泡机制。
• 在listenerBank事件池中查找事件回调并合成到event(合成事件结束)4.处理合成事件内的回调事件(事件触发完成 end)
   

四、合成事件、原生事件之间的冒泡执行关系

结论：

• 原生事件阻止冒泡肯定会阻止合成事件的触发。
• 合成事件的阻止冒泡不会影响原生事件。

原因：

浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。

节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡，所以原生事件阻止冒泡会阻止合成事件的触发，而合成事件的阻止冒泡不会影响原生事件。