React事件机制

概念

React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，在React中这套事件机制被称之为合成事件。

注意： React的合成事件不会直接绑定到目标DOM节点上，用事件委托机制，以队列的方式，从触发事件的组件向父组件回溯，直到Root节点。

原生事件回顾

JavaScript原生事件的执行需要经过三个阶段，事件捕获-事件目标-事件冒泡。、

事件捕获

当某个元素触发某个事件，顶层对象 Document 就会发出一个事件流，随着 DOM 树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。

事件目标

当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡

从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。

React事件和原生事件的执行顺序

react所有事件都挂载在document对象上，当真实的DOM元素触发事件，会冒泡到document对象后，在处理React事件，所以会先执行原生事件，在处理React事件，最后真正执行document上挂载的事件

React做这么多的意义

1.减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次

2.统一规范，解决 ie 事件兼容问题，简化事件逻辑

3.对开发者友好