为什么要合成事件
1、进行浏览器兼容,实现更好的跨平台
React 采用的是顶层事件代理机制,能够保证冒泡一致性,可以跨浏览器执行。React 提供的合成事件用来抹平不同浏览器事件对象之间的差异,将不同平台事件模拟合成事件。
2、避免垃圾回收
事件对象可能会被频繁创建和回收,因此 React 引入事件池,在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉,而是存放进一个数组中,当事件触发,就从这个数组中弹出,避免频繁地去创建和销毁(垃圾回收)。
3、方便事件统一管理和事务机制
事件注册机制
1、通过 事件委托
的方式, 将所有事件都绑定在了 document
来进行统一处理
2、每次绑定都会将事件处理函数, 存储起来
对于同一个 DOM
分别绑定原生事件、合成事件, 在原生事件中阻止事件冒泡为什么会阻止合成事件的执行?
1、合成事件是事件委托的一种实现,主要是利用事件冒泡将所有的事件统一绑定到document上
2、根据事件流,事件处理顺序是,事件捕获、目标事件、事件冒泡,并且原生事件要比合成事件先执行,如果阻止原生事件冒泡,就会阻止合成事件冒泡到document,那么合成事件自然无法执行
react16.x和react17合成事件区别
1、在react16.x中,捕获阶段和冒泡阶段原生事件都早于合成事件执行
2、在react17中,捕获阶段合成事件早于原生事件,冒泡阶段,原生事件早于合成事件
3、在react16.x中,将合成事件绑定到流document上
4、在react17中,合成事件绑定在root上