React 合成事件 SyntheticEvent

1. 什么是合成事件（SyntheticEvent）？

• React自己实现了一套事件，在原生事件基础上做了很大改进，减少了内存消耗，解决了IE等浏览器的兼容问题
• React把事件委托到 document身上（react 17以前），在React17以后再次改进了合成事件，委托对象变成了容器对象
• 当真实dom元素触发事件，先处理原生事件，然后会冒泡到document或容器对象上，再处理react事件

2. 事件捕获，事件冒泡，事件委托

DOM2级事件规定的事件流包含3个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段

首先发生的事件捕获为截获事件提供机会，然后是实际的目标接收事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应

• 事件捕获： 事件捕获会从外向内进行捕获（addEventListener 第三个参数设置为 true可以让事件在 捕获阶段触发）
• 事件冒泡： 事件冒泡会从内向外冒泡
• 事件委托： 利用事件冒泡，将事件挂载在外层父级上，当触发子级时会向上冒泡触发父级的方法，再通过 e.target 拿到子级对象

3. React16与17版本合成事件的区别

• react16时事件委托的对象是 document，react17时事件委托的对象是容器组件
• react16时原生事件与react事件执行时，冒泡阶段与捕获阶段没有区分开（捕获-> 冒泡 -> 捕获）；react17时优化了合成事件的执行，当与原生事件一起调用时，捕