【React】React的事件机制

[swiftwind0405]

React 内部自己实现了一套高效的事件机制，为了提高框架的性能，React 通过 DOM 事件冒泡，只在 document 节点上注册原生的 DOM 事件，React 内部自己管理所有组件的事件处理函数，以及事件的冒泡、捕获。

所以说，如果你通过 addEventListener 注册了某个 DOM 节点的某事件处理函数，并且通过 e.stopPropagation() 阻断了事件的冒泡或者捕获，那么该节点下的所有节点上，同类型的 React 事件处理函数都会失效。

原生事件（阻止冒泡）会阻止合成事件的执行，合成事件（阻止冒泡）不会阻止原生事件的执行，两者最好不要混合使用，避免出现一些奇怪的问题。

React 中的事件对象称之为 SyntheticEvent（合成对象），它是依据 DOM Level 3 的事件规范实现的，这样做最大的好处是可以屏蔽浏览器的差异，各种厂商的浏览器对规范的实现程度是不一样的，如果直接使用原生 DOM 事件对象的话，有些情况下你需要考虑浏览器的兼容性。而 React 通过 SyntheticEvent 已经把这些琐事帮你搞定了，在任何 React 支持的浏览器下，事件对象都有一致的接口。

React 中所有的事件处理函数都会接收到一个 SyntheticEvent 的实例 e 作为参数，如果在某些特殊的场景中，你需要用到原生的 DOM 事件对象，可以通过 e.nativeEvent 来获取。

参考文档

• 一文吃透 React 事件机制原理