摘要：前言这是事件机制的第一篇，主要内容有表象理解，验证，意义和思考。因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由统一去处理。合成事件的阻止冒泡不会影响原生事件。
前言
这是 react 事件机制的第一篇，主要内容有：表象理解，验证，意义和思考。
表象理解先回顾下 对react 事件机制基本理解，react 自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。
我们都知道react 的所有事件并没有绑定到具体的 dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。
上面是基于对 react 事件的一个基本的认知，那这个认知是否正确呢？我们可以通过简单的方法进行验证。
验证验证内容：
所有事件均注册到了元素的最顶层-document 上
节点的事件由统一的入口处理
为了方便，直接通过 cli 创建一个项目。
代码如下：
componentDidMount(){
document.getElementById("btn-reactandnative").addEventListener("click", (e) => {
console.log("原生+react 事件: 原生事件执行");
});
}
handleNativeAndReact = (e) => {
console.log("原生+react 事件: 当前执行react事件");
}
handleClick=(e)=>{
console.log("button click");
}
render(){
return react event!!!
react 事件
}
代码中给两个 button绑定了合成事件，多带带给btn#btn-reactandnative绑定了一个原生的事件。
然后看下chrome 的控制台，查看元素上的注册事件。
经过简单的验证，可以看到所有的事件根据不同的事件类型都绑定在了 document 上。触发函数统一是 dispatchEvent。
试想一下如果一个节点上同时绑定了合成和原生事件，那么禁止冒泡后执行关系是怎样的呢？
其实读到这里答案已经有了。我们现在基于目前的知识去分析下这个关系。
因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由dispatchEvent统一去处理。
下面是我得出的结论：
原生事件阻止冒泡肯定会阻止合成事件的触发。
合成事件的阻止冒泡不会影响原生事件。
为什么呢？先回忆下浏览器事件机制
浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。
节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡。
既然原生都阻止冒泡了，那合成还执行个啥嘞。
好，轮到合成的被阻止冒泡了，那原生会执行吗？
当然会了。
因为原生的事件先于合成的执行，所以合成事件内阻止的只是合成的事件冒泡。（代码我就不贴了）
所以得出结论：
原生事件（阻止冒泡）会阻止合成事件的执行
合成事件（阻止冒泡）不会阻止原生事件的执行
两者最好不要混合使用，避免出现一些奇怪的问题
意义react 自己做这么多的意义是什么？
我的理解的是
1.减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次
2.统一规范，解决 ie 事件兼容问题，简化事件逻辑
3.对开发者友好
思考既然 react 帮我们做了这么多事儿，那他的背后的机制是什么样的呢？
事件怎么注册的，事件怎么触发的，冒泡机制怎样实现的呢？
请看后续文章.....
更多精彩内容欢迎关注我的公众号-前端张大胖
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104426.html
摘要：对事件机制的初步理解和验证对于合成的理解事件注册机制事件执行本文基于进行分析，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。最后希望通过本文可以让你对事件机制有更清晰的认识和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 写这个文章也算是实现19年的一个 flag，研究一个知识点并且把...
摘要：前言这是事件机制系列文章的第二篇对于合成的理解，咱们就来说说合成这个名词。在给注册事件的时候也是对兼容性做了处理。总结以上就是我对于合成这个名词的理解，其实内部还处理了很多，我只是略微简单的举了几个栗子。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 这是react事件机制系列文章的第二篇-对于合成的理解，...
摘要：文章涉及到的源码是基于版本，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。到这里事件注册就完事儿了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 这是 react 事件机制的第三节 - 事件注册，通过本文你将了解react 事件的注册过程，以及在这个过程中主要经过了哪些关键步骤，同时结合源...
摘要：文章涉及到的源码是基于版本，虽然不是最新版本但是也不会影响我们对事件机制的整体把握和理解。总结本文主要是从整体流程上介绍了下事件触发的过程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 这是 react 事件机制的第四节-事件执行，一起研究下在这个过程中主要经过了哪些关键步骤，本文也是react 事件机制...
摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...
阅读 2189·2021-11-18 10:07
阅读 2130·2021-09-22 15:59
阅读 2964·2021-08-23 09:42
阅读 2112·2019-08-30 15:44
阅读 1074·2019-08-29 15:06
阅读 2084·2019-08-29 13:27
阅读 1055·2019-08-29 13:21
阅读 1314·2019-08-29 13:13
