小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
我们都知道 W3C 协会制定了 DOM 的标准，W3C DOM 标准可以分为 DOM1、DOM2、DOM3 三个版本。从 DOM2 开始，DOM 的事件传播分三个阶段进行：事件捕获阶段、处于目标阶段和事件冒泡阶段。
React 为了进行浏览器兼容，实现更好的跨平台，更好的优化，方便事件统一管理事务机制，自己实现了一套事件系统，叫做 合成事件。
原生DOM事件流
原生 DOM 事件分为三个阶段事件捕获阶段、处于目标阶段和事件冒泡阶段*
具体可以参考之前的文章: 【# 事件捕获和事件冒泡】
(本图片来源网络)
React 事件原理
React 的事件主要分为两个阶段：事件注册、.事件分发
事件注册
组件挂载的阶段，事件注册主要做了两件事情：document注册事件、存储事件回调，这个过程也叫 react 的事件委托机制。
(本图片来
源网络)
document注册事件
在组件挂载阶段，react 根据组件本身声明的事件类型（onclick、onchange、等等），通过 addEventListener 给 document 添加事件监听，然后指定统一的回调函数 dispatchEvent，同一事件不论注册几次，最终只会保留一个有效实例，从而减少内存开销。
存储事件回调
React 会把组件内所有的事件统一存放到一个对象中（listenerBank）,通过事件类型进行分类，回调函数的存储采用键值对（key/value）的方式，key 是组件的唯一标识 id，value 对应的就是事件的回调函数。
如下图所示：
(本图片来源网路)
事件分发
React 的事件分发就是事件触发。
React 的事件触发只会发生在 DOM 事件流的冒泡阶段，因为在 document 上注册时就默认是在冒泡阶段被触发执行
主要过程如下：
(本图片来源网路)
图中
阻止冒泡是指调用 stopImmediatePropagation 方法阻止冒泡。
【stopPropagation 与 stopImmediatePropagation 的区别】
在 DOM 事件流的冒泡阶段先后经历的元素：
child <div>->parent <div>-><body>-><html>->document->window
问题：React 合成事件和原生 DOM 事件哪个先执行？
React 的事件委托机制，React 组件对应的原生 DOM 节点上的事件触发时机总是在 React 组件上的事件之前。
结语
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️
文章如有错误之处，希望在评论区指正🙏🙏。
