前言这是React事件机制系列文章的第二篇——对合成的理解，先说说合成这个名词。初听综合二字时，觉得它很高大深沉，但并不容易理解。在对react的事件机制有了一个大概的了解之后，对皮毛有了一点了解。我认为合成不仅仅是事件的合成和处理，广义上还包括：1.首先是对原生事件的封装2.对于一些原生事件的事件升级和改造3.不同浏览器事件的兼容处理1.原生事件的封装先看一段熟悉的代码事件对象是react包装的对象，原生事件对象放在属性e.nativeEvent中。通过调试，看看这个参数e在执行栈中包含了哪些属性！[剪贴板.pvhR)！[图片上传中...]看官方文档帮助我们理解合成事件SyntheticEvent是react合成事件的基类。定义合成事件的基本公共属性和方法。React会根据当前的事件类型使用不同的合成事件对象，比如鼠标独立事件——SyntheticMouseEvent，焦点事件——SyntheticFocusEvent等，但它们都是继承自SyntheticEvent。2、原生事件的升级改造对于一些dom元素的事件，我们绑定事件后，react不仅会处理你声明的事件类型，还会添加一些其他的事件来帮助我们提升交互体验。下面举个例子来说明一下：当我们为input声明一个onChange事件的时候，我们看看react为我们做了什么？可以看出react不仅注册了一个onchange事件，还注册了很多其他的事件。而这时候，当我们在文本框中输入内容的时候，就可以实时获取到内容。但是，如果原生只注册了一个onchange，则需要在失去焦点时触发该事件。所以react也帮我们弥补了这个nativeevent的缺陷。ps：上面红色箭头处有一个invalid事件，不是在文档上注册的，而是在具体元素上注册的。我的理解是这是html5中新增的事件，当输入数据不符合校验规则时自动触发。但是，验证规则和配置必须写在当前输入元素上。如果在文档上注册了事件，它将无效。.3、浏览器事件的兼容处理也是一个重点。React还在为文档注册事件时处理兼容性。看看上面的代码。上面的代码其实就是给文档注册事件，其实内部是兼容ie浏览器的。总结：以上是我对react合成这个词的理解。其实react内部有很多处理。我只是举了几个简单的例子。这篇文章算是过分了，后面开始讲事件注册和事件派发的机制。走起~更多精彩内容请关注我的公众号-前端张胖子
