react合成事件和DOM原生事件的区别

2024-06-27 12:27:31

事件流

在了解事件之前先来看一下什么是事件流。
'流’这个名词在JS中随处可见。像DOM事件流、React中的数据流等等。
其实，流就是一种有方向的数据；事件流，是页面接受事件的顺序。

一、DOM事件流的三个阶段

1、事件捕获阶段

当某个事件触发时，文档根节点最先接受到事件，然后根据DOM树结构向具体绑定事件的元素传递。该阶段为父元素截获事件提供了机会。
事件传递路径为：
window —> document —> boy —> button

2、目标阶段

具体元素已经捕获事件。之后事件开始想根节点冒泡。

3、事件冒泡阶段

该阶段的开始即是事件的开始，根据DOM树结构由具体触发事件的元素向根节点传递。
事件传递路径：
button —> body —> document —> window

4、选择监听事件的阶段

使用addEventListener函数在事件流的的不同阶段监听事件。
DOMEle.addEventListener(‘事件名称’,handleFn,Boolean);
此处第三个参数Boolean即代表监听事件的阶段；
为true时，在在捕获阶段监听事件，执行逻辑处理；
为false时，在冒泡阶段监听事件，执行逻辑处理。

二、react合成事件

1、合成事件原理

如果react事件绑定在了真实DOM节点上，一个节点同事有多个事件时，
页面的响应和内存的占用会受到很大的影响。因此SyntheticEvent作为
中间层出现了。
事件没有在目标对象上绑定，而是在document上监听所支持的所有事件，当事件发生并冒泡至document时，react将事件内容封装并叫由真正的处理函数运行。

2、绑定方式

绑定事件的属性名是采用驼峰形式的；
事件处理函数是一个函数，而不是像原生事件那样的函数名称；
<div onClick={this.handleClick}>点我呀！</div>

react合成事件和DOM原生事件的区别相关推荐

【React】合成事件和原生事件
欢迎学习交流!!! 持续更新中- 文章目录事件流 DOM事件流的几个阶段 React合成事件 React合成事件原理在react中使用原生事件方法合成事件和原生事件混合使用响应顺序阻止冒泡 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
【React源码】(十六)React 合成事件
React 合成事件概览从v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中. 引入官方提供的图片: 图 ...
彻底搞懂原生事件流和 React 事件流
事件系统,业务开发中只要需要与用户进行交互,那么事件是必不可少的,dom 中存在很多事件,比如 click,scroll,focus 等等.我们将深入事件系统中,以及事件中常用的一些操作比如 prev ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
DOM编程事件正则表达式表单校验
目录一.增加二.删除三.查找购物车四.事件和事件对象 4.1 事件对象 4.2 目标事件对象 4.3 事件监听对象 4.4 文档事件对象 4.5 鼠标键盘事件对象 4.6 事件阻 ...
React源码分析7 — React合成事件系统
1 React合成事件特点 React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题. ...
浅谈jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

最新文章

热门文章