摘要：前言这是事件机制系列文章的第二篇对于合成的理解，咱们就来说说合成这个名词。在给注册事件的时候也是对兼容性做了处理。总结以上就是我对于合成这个名词的理解，其实内部还处理了很多，我只是略微简单的举了几个栗子。
前言
这是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内部还处理了很多，我只是略微简单的举了几个栗子。
本文算是一个过度吧，后面开始聊事件注册和事件派发的机制。走起~
更多精彩内容欢迎关注我的公众号-前端张大胖
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104427.html
摘要：对事件机制的初步理解和验证对于合成的理解事件注册机制事件执行本文基于进行分析，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。最后希望通过本文可以让你对事件机制有更清晰的认识和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 写这个文章也算是实现19年的一个 flag，研究一个知识点并且把...
摘要：文章涉及到的源码是基于版本，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。总结本文主要是从整体流程上介绍了下事件触发的过程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 这是 react 事件机制的第四节-事件执行，一起研究下在这个过程中主要经过了哪些关键步骤，本文也是react 事件机制...
摘要：前言这是事件机制的第一篇，主要内容有表象理解，验证，意义和思考。因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由统一去处理。合成事件的阻止冒泡不会影响原生事件。 showImg(https://segmentfault.com/img/bVbtvP2?w=800&h=420); 前言 这是 react 事件机制的第一篇，主要内容有：表象理解，验证...
摘要：文章涉及到的源码是基于版本，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。到这里事件注册就完事儿了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 这是 react 事件机制的第三节 - 事件注册，通过本文你将了解react 事件的注册过程，以及在这个过程中主要经过了哪些关键步骤，同时结合源...
摘要：二阻止事件冒泡，没办法阻止原生事件冒泡。从事件的三个阶段讲起，会略微提及下的事件机制。就是说注册某个事件，会强制依赖其他事件。因为所有事件都是绑定在上的。划重点事件合成的过程。派发的过程实际上就是遍历事件队列的过程。 react.js事件机制 写这篇文章的缘由： 一：在给input绑定事件的时候，很好奇为何onChange的交互形式竟然和onInput一模一样。 因为原生的change...
阅读 2931·2021-11-24 10:22
阅读 3005·2021-11-23 10:10
阅读 1264·2021-09-28 09:35
阅读 1700·2019-08-29 13:16
阅读 1373·2019-08-26 13:29
阅读 2760·2019-08-26 10:27
阅读 659·2019-08-26 10:09
阅读 1414·2019-08-23 18:05
