React 合成事件与 JavaScript 原生事件对比
发布日期:2021-05-20 10:06:59 浏览次数:29 分类:技术文章

本文共 1345 字,大约阅读时间需要 4 分钟。

下面我们从 4 个方面来对比 React 合成事件与 JavaScript 原生事件。

1、 事件传播与阻止事件传播

浏览器原生 DOM 事件的传播可以分为 3 个阶段:事件捕获阶段、目标对象在这里插入代码片本身的事件处理
程序调用以及事件冒泡。
在这里插入图片描述

事件捕获会优先调用结构树最外层的元素上绑定的事件监听器,然后依

次向内调用,一直调用到目标元素上的事件监听器为止。可以在将 e.addEventListener() 的第三
个参数设置为 true 时,为元素 e 注册捕获事件处理程序,并且在事件传播的第一个阶段调用。

此外,事件捕获并不是一个通用的技术,在低于 IE9 版本的浏览器中无法使用。而事件冒泡则与

事件捕获的表现相反,它会从目标元素向外传播事件,由内而外直到最外层。
可以看出,事件捕获在程序开发中的意义并不大,更致命的是它的兼容性问题。所以,React
的合成事件则并没有实现事件捕获,仅仅支持了事件冒泡机制。这种 API 设计方式统一而简洁,
符合“二八原则”。
阻止原生事件传播需要使用 e.preventDefault(),不过对于不支持该方法的浏览器(IE9 以
下),只能使用 e.cancelBubble = true 来阻止。

而在 React 合成事件中,只需要使用 e.preventDefault() 即可。


什么是合成事件

Virtual DOM 在内存中是以对象的形式存在的,如果想要在这些对象上添加事件,就会非常简单。React 基于 Virtual DOM 实现了一个 SyntheticEvent (合成事件)层,我们所定义的事件处理器会接收到一个 SyntheticEvent 对象的实例,它完全符合 W3C 标准,不会存在任何 IE 标准的兼容性问题。并且与原生的浏览器事件一样拥有同样的接口,同样支持事件的冒泡机制,我们可以使用 stopPropagation() 和 preventDefault() 来中断它。所有事件都自动绑定到最外层上。如果需要访问原生事件对象,可以使用 nativeEvent 属性。
  1. 事件类型

    React 合成事件的事件类型是 JavaScript 原生事件类型的一个子集。

  2. 事件绑定方式

受到 DOM 标准的影响,绑定浏览器原生事件的方式也有很多种,具体如下所示。 直接在 DOM 元素中绑定:  在 JavaScript 中,通过为元素的事件属性赋值的方式实现绑定:el.onclick = e => {
console.log(e); } 通过事件监听函数来实现绑定:el.addEventListener('click', () => {
}, false);el.attachEvent('onclick', () => {
});**相比而言,React 合成事件的绑定方式则简单得多:**

4. 事件对象

原生 DOM 事件对象在 W3C 标准和 IE 标准下存在着差异。在低版本的 IE 浏览器中,只能
使用 window.event 来获取事件对象。而在 React 合成事件系统中,不存在这种兼容性问题,在事
件处理函数中可以得到一个合成事件对象。

转载地址:https://blog.csdn.net/weixin_45416217/article/details/112709956 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:react中使用index作为key值会怎样?
下一篇:react-setState更新机制--源码解析

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月05日 16时31分53秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

creo视图管理器使用方法_学以致用之中望3D—浅谈使用中望3D的初步感受 2019-04-21
周育如的音标口诀大全_花鸟画口诀大全,实用! 2019-04-21
心电图计算心率公式_医学常用的计算公式口诀(内外妇儿),赶快收藏! 2019-04-21
select 移动端 第一个无法选中_Python爬虫微博(移动端)评论 2019-04-21
华为云welink成像是反的_华为发布智能办公神器WeLink,可连接会议室开会,还可一键遥控报销和智能翻译... 2019-04-21
唱好铁血丹心谐音正规_趙贤典:打好“感情牌” 唱好“大合唱” 2019-04-21
aix系统vi修改命令_Linux基础知识必备:利用vi编辑器创建和编辑正文文件 2019-04-21
天涯明月刀开发_玩家被天涯明月刀手游“冷落”?六大门派角色竟不带正眼看人... 2019-04-21
this指向undefined uiapp_一个this都没有,真好 2019-04-21
add p4 多个文件_2-3【微信小程序全栈开发课程】index页面完善--vue文件代码解析... 2019-04-21
5w2h原则指的是什么_什么是5W2H分析法?一首小诗带入进入大门。 2019-04-21
技校毕业是什么学历_中等职业学校是什么_中等职业学校毕业是什么学历 2019-04-21
2压缩备份数据库_MySQL数据备份与恢复(二) xtrabackup工具 2019-04-21
英特尔cpu发布时间表_被嘲讽的英特尔核显,强大能力其实超乎你的想象 2019-04-21
chi2inv函数 matlab_MATLAB概率和统计(2) 2019-04-21
lisp修改上一个图素_在Windows上安装Haskell 2019-04-21
ad19 导出step 没有pcb_几款主流PCB软件哪个最好用,你用过几款? 2019-04-21
json mysql 字段 默认值_Newtonsoft.Json 六个超简单又实用的特性,值得一试 【上篇】... 2019-04-21
ocdma相干非相干_《Acconeer 60GHz脉冲相干雷达芯片:A111》 2019-04-21
修改表格字体颜色_Excel技巧:Excel如何修改字体颜色 2019-04-21