react 合成事件浅析

75 阅读1分钟

问题拆解

  1. 原生dom流
  2. 原生监听事件
  3. 为什么要有合成事件,解决了什么问题
  4. 原生事件和合成事件执行的顺序是什么呢

原生dom

  1. 我们知道原生dom事件流发生的流程是 捕获,目标阶段,冒泡

原生dom事件

  1. 通过绑定的onClick 和 addEventListerener
<Button onClick={() =>{ }} />

事件合成

  1. 为什么要有合成事件,原因在于不同浏览器对于事件的处理 都不一样,react 想去统一差异。
  2. 比如onChange 事件其实是由多个 比focus ,change 多个事件合成。

那么顺序

  1. 主体是先执行了 ,原生事件流,之后再执行 合成事件流,最后是docunment ,因为react16是把事件都绑定到容器上的