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

本文共 1374 字,大约阅读时间需要 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 元素中绑定:
   
    Test  在 JavaScript 中,通过为元素的事件属性赋值的方式实现绑定:el.onclick = e => {

    
console.log(e); } 通过事件监听函数来实现绑定:el.addEventListener('click', () => {    }, false);el.attachEvent('onclick', () => {    });**相比而言,React 合成事件的绑定方式则简单得多:** Test

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

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

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

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.249.68.84]2022年04月16日 12时59分03秒