摘要：本博客大概介绍一下的事件机制，并给出整体的设计图，但不涉及底层的源码结构分析。整个设计图以上是对的合成事件一个大概的介绍，里面还有很多细节和原理没说到，有兴趣的同学可以进一步研究一下源码的细节。
好久没写博客了，前段时间太忙以至于平时的积累都记录在内网的wiki里，趁着这几天有空，将这段时间所积累的干货慢慢的分享出来，如果内容有不正确的地方，欢迎纠正。
本博客大概介绍一下react的事件机制，并给出整体的设计图，但不涉及react底层的源码结构分析。
现象：
demo1:nidemo2: render() { returnni}
虽然两个例子都是通过标签内嵌的方式将click事件进行绑定，但其中的原理是不一样的，demo1是采用原生的事件处理，demo2是采用react的合成事件机制处理；
合成事件：
对于jsx来说，是采用了类似于DOM0的事件绑定的方式进行处理，它会收到一个合成事件对象（synthicevent），该对象集成了原生事件对象的所有特性，而且还是事件冒泡机制，并且能支持stopPropagation和preventDefault两种方法；
原生事件与合成事件的区别：
原生的事件绑定是采用小写onclick，而react则是采用大写onClick；
原生事件绑定的是一个js的字符串，而react采用的是一个函数的指针；
合成事件的实现机制：
事件机制原型图：
该图大概的表示了react的事件机制的整体结构图，接下来具体说说它里面的原理。
真正的监听者：
对于react来说，虽然事件是绑定在v-dom中，但其实真正的监听者只有一个，就是结构中最外层的document对象进行监听，主要采用了事件冒泡的方式，将v-dom中触发的事件包装成一个合成事件，然后通过事件冒泡的方式，最终冒泡到最外层的document监听和执行（就是事件委托）；
事件注册：
事件注册是在组件生成的时候，将v-dom中所有的事件都对应的原生事件都注册在document的监听器中，例如onClick对应的原生事件是onclick，如果v-dom中有绑定了onClick，那么就会将对应的onclick事件注册在document中，整个注册过程可以三个阶段：
1） 将v-dom中所涉及到的绑定事件所对应的原生事件都在enqueuePutListener中绑定到document身上；
2） 将v-dom中所有事件的事件处理函数都存放在listenerBank中，存放的方式是以registrtionname和key作为索引存放，其中registrtionname是事件名，key是instance的id值，所以形式是：
listenerBank[registrtionname][key] = listener
这样的好处是将可能要触发的事件分门别类，以及将对应的listener也分门别类存放；为了就是在事件触发的时候，能从listenerBank中取出同类型的listener存放在dispatchListener中；
3） 最后将dispatchEvent作为callback函数，放在addEventListener和removeEventListener里面，等待事件的触发；
合成事件：
当事件触发的时候，不会直接将原生的事件发送到最外层的document中，而是经过处理，将处理后的事件发送到document中；事件合成的经过：获取原生事件，并通过原生事件的类型和所在组件的id值，在listenerBank中取出对应的listener函数，并存放在_dispatchListener队列中，然后将该实例存放到_dispatchInstance队列中，这样一来，可以将同类型的事件函数都按照顺序存放在_dispatchListener中，最后一同处理；
事件发布：
当事件触发时，会先原生事件变成合成事件，然后传递到document中，然后document会通过dispatchEvent回调函数依次执行dispatchListener中同类型的事件监听函数。
整个设计图：
以上是对react的合成事件一个大概的介绍，里面还有很多细节和原理没说到，有兴趣的同学可以进一步研究一下源码的细节。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100358.html
摘要：另外第三方也可以通过的事件插件机制来合成自定义事件，尽管很少人这么做。抽象跨平台事件机制。打算干预事件的分发。事件是的一个自定义事件，旨在规范化表单元素的变动事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定...
摘要：给注册原生事件回调为统一的事件分发机制。根据元素唯一标识和事件类型从中取出回调函数返回带有合成事件参数的回调函数总流程将上面的四个流程串联起来。可见，回调函数是直接调用调用的，并没有指定调用的组件，所以不进行手动绑定的情况下直接获取到的是。 关于React事件的疑问 1.为什么要手动绑定this 2.React事件和原生事件有什么区别 3.React事件和原生事件的执行顺序，可以混...
摘要：前言这是事件机制的第一篇，主要内容有表象理解，验证，意义和思考。因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由统一去处理。合成事件的阻止冒泡不会影响原生事件。 showImg(https://segmentfault.com/img/bVbtvP2?w=800&h=420); 前言 这是 react 事件机制的第一篇，主要内容有：表象理解，验证...
摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...
摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...
阅读 2893·2019-08-30 15:55
阅读 1997·2019-08-30 14:02
阅读 1237·2019-08-29 15:23
阅读 1005·2019-08-29 11:27
阅读 458·2019-08-26 11:43
阅读 3185·2019-08-26 10:32
阅读 1251·2019-08-23 14:41
阅读 3298·2019-08-23 14:41
