共计 1117 个字符，预计需要花费 3 分钟才能阅读完成。
前言
这是 react 事件机制系列文章的第二篇 - 对于合成的理解，咱们就来说说合成这个名词。
刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。
当我大概的了解过 react 事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括：
1. 首先就是对原生事件的封装
2. 对某些原生事件的升级和改造
3. 不同浏览器事件兼容的处理
1. 对原生事件的封装
先看一段再熟悉不过的代码
上面代码是给一个元素添加 click 事件的回调方法
方法中的参数 e，其实不是原生事件对象而是 react 包装过的对象，同时原生事件对象被放在了属性 e.nativeEvent 内。
通过调试，在执行栈里看下这个参数 e 包含哪些属性
![clipboard.p
vhR)
![图片上传中 …]
看下官方文档，帮助我们理解下合成事件
SyntheticEvent 是 react 合成事件的基类，定义了合成事件的基础公共属性和方法。
react 会根据当前的事件类型来使用不同的合成事件对象，比如鼠标单机事件 – SyntheticMouseEvent，焦点事件 -SyntheticFocusEvent 等，但是都是继承自 SyntheticEvent。
2. 对原生事件的升级和改造
对于有些 dom 元素事件，我们进行事件绑定之后，react 并不是只处理你声明的事件类型，还会额外的增加一些其他的事件，帮助我们提升交互的体验。
这里就举一个例子来说明下：
当我们给 input 声明个 onChange 事件，看下 react 帮我们做了什么？
可以看到 react 不只是注册了一个 onchange 事件，还注册了很多其他事件。
而这个时候我们向文本框输入内容的时候，是可以实时的得到内容的。
然而原生只注册一个 onchange 的话，需要在失去焦点的时候才能触发这个事件。
所以这个原生事件的缺陷 react 也帮我们弥补了。
ps：上面红色箭头中有一个 invalid 事件，这个并没有注册到 document 上，而是在具体的元素上。我的理解是这个是 html5 新增的一个事件，当输入的数据不符合验证规则的时候自动触发，然而验证规则和配置都要写在当前 input 元素上，如果注册到 document 上这个事件就无效了。
3. 浏览器事件的兼容处理
这个也算是一个点吧。react 在给 document 注册事件的时候也是对兼容性做了处理。
看下代码
上面这个代码其实就是给 document 注册事件，内部其实也是做了对 ie 浏览器的兼容。
总结：
以上就是我对于 react 合成这个名词的理解，其实 react 内部还处理了很多，我只是略微简单的举了几个栗子。
本文算是一个过度吧，后面开始聊事件注册和事件派发的机制。走起~
更多精彩内容欢迎关注我的公众号 - 前端张大胖
