本文记录一下原生事件和react事件机制的差异

一. 基本介绍

原生dom事件： 事件捕获 —> 目标dom —> 事件冒泡
react事件系统（合成事件）： 事件在具体的dom节点上触发后， 会被冒泡到document上，document上所绑定的统一事件处理程序，会将事件分发到具体的组件实例中去。这一套机制被称为合成事件
合成事件： 模拟原生dom事件所拥有的能力, e.nativeEvent 获取原生事件对象

二. 执行顺序

  1. 原生事件优先执行，合成事件后执行。子元素原生事件执行、父元素原生事件执行、子元素合成事件执行、父元素合成事件执行、document原生事件执行。
  2. 阻止合成事件间的冒泡: e.stopPropagation()；阻止合成事件与最外层document上事件的冒泡： e.nativeEvent.stopImmediatePropagation()

三. 为什么要用合成事件

前面说了，合成事件会模拟原生dom的行为，那么为什么不直接用原来的呢，非要自己搞一套？主要是为了平台兼容。

四：差异

  • 绑定方式：原生事件绑定在真实 DOM，React 事件绑定在虚拟 DOM
  • 执行机制：React 事件通过事件委托到 document 统一处理，原生是直接绑定

一些变化

React 17 之前，合成事件的原生监听器绑定在 document 上；React 17 及之后，监听器绑定在 React 应用的「根容器节点」（如 ReactDOM.render(, root) 中的 root 元素）。为什么？主要是因为有些项目存在多个react版本，避免混乱。