React的事件与原生事件的执行顺序?
react自身实现了一套自己的事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等,虽然和原生的是两码事,但也是基于浏览器的事件机制下完成的。
react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上,然后由统一的事件处理程序来处理,同时也是基于浏览器的事件机制(冒泡),所有节点的事件都会在 document 上触发。
React事件与原生事件的执行顺序又是如何?
代码示例
import React from 'react';
class App extends React。Component {constructor(props) {super(props);this.parentRef = React.createRef();this.childRef = React.createRef();}componentDidMount() {console.log('react componentDidMount');this.parentRef.current?.addEventListener('click', () => {console.log('父元素:原生事件 父元素 DOM 事件监听');});this.childRef.current?.addEventListener('click', () => {console.log('子元素:原生事件 子元素 DOM 事件监听');});document.addEnvetListener('click', e => {console.log('document:原生document DOM 事件监听');});}parentClickFun = () => {console.log('React:父元素事件监听'); };childClickFun = () => {console.log('React:子元素事件监听'); }render() {return (<div ref={this.parentRef} onClick={this.parentClickFun}><div ref={this.childRef} onClick={this.childClickFun}>事件执行</div></div>);}
}
输出:
子元素:原生事件 子元素 DOM 事件监听
父元素:原生事件 父元素 DOM 事件监听
React:子元素事件监听
React:父元素事件监听
document:原生document DOM 事件监听
事件执行顺序:
1、先执行 子元素的DOM事件
2、执行 父元素的DOM事件
3、执行 React 子元素的事件
4、执行 React 父元素的事件
5、 最后执行 document上的DOM事件的监听
由上总结:
1、React 中所有事件都挂载在document对象上
2、先触发真是DOM事件,再触发React事件
3、最后执行document 上挂载的事件
如何阻止冒泡行为?
1、阻止合成事件的冒泡, e.stopPropagation();
2、阻止合成事件与最外层document 上的事件的冒泡:e.nativeEvent.stop
3、阻止合成事件与原生事件的冒泡:
document.body.addEventListener('click', e => {if (e.target && e.target.matches('div.code')) {return;}this.setState({active: false});
});
总结
React 最终会绑定在document这个DOM上
React有一套自己的合成事件机制
相关文章:
React的事件与原生事件的执行顺序?
react自身实现了一套自己的事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等,虽然和原生的是两码事,但也是基于浏览器的事件机制下完成的。 react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上,然后由…...
【Java】Runtime与Properties获取系统信息
Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容:三、问题描述四、解决方案:4.1 代码4.2 运行结果 五、总结: 一、前言 这些都被淘汰比较少用了…...
基于SpringBoot的社团管理系统
作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于JavaSpringBootVueMySQL的社团管理系统【附源码文档】、…...
UE5.3_跟一个插件—Socket.IO Client
网上看到这个插件,挺好! 项目目前也没有忙到不可开交,索性跟着测一下吧: 商城可见,售价72.61人民币! 但是,git上有仓库哦,免费!! 跟着链接先准备起来: Documentation: GitHub - getnamo/SocketIOClient-Unreal: Socket.IO client plugin for the Unreal Engin…...
鸿蒙轻内核A核源码分析系列七 进程管理 (1)
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 轻内核A核源码分析系列一 数据结构-双向循环链表 轻内核A核源码分析系列二 数据结构-位图操作 轻内核A核源码分析系列三 物理内存(1࿰…...
qt QGraphicsScene场景坐标和场景内GraphicsItem局部坐标的相互转换
为了更清晰地解释场景坐标与局部坐标之间的转换过程,我们可以通过一个简单的实例来演示如何赋值场景坐标,并将其转换为图形项的局部坐标。 实例步骤 假设我们有一个场景 QGraphicsScene 和一个矩形图形项 QGraphicsRectItem,矩形的大小为 1…...
Windows与linux中docker的安装与使用
windos中安装使用docker 下载Docker_Desktop 安装包进入docker官网下载Docker_Desktop: https://www.docker.com/启用wsl 我们搜索“启用或关闭Windows功能”,打开后勾选适用于Linux的Windows 子系统 Docker_Desktop设置 出现Docker Engine stopp…...
some electronic products
纽扣电池 button cell 运动手环 sports wristband 智能手环 smart bracelet 皮卡丘夜灯 pikachu night lamp 数字显示充电器 Charger with a digital display 磁吸无线充 magnetic wireless charger 直流电机调速器 DC motor speed controller 继电器模块 relay module 锂离子电…...
刘润《关键跃升》读书笔记7
沟通: 想明⽩,说清楚,能接受 团队沟通的正确⽅式可以⽤9个字来概括:想明⽩,说清楚,能接受 (⻅图4-1)想明⽩ 有时经理跟⼈沟通,讲完之后却⽆奈地对员⼯说,你怎…...
带参宏定义
#define WM_EVENT_DECLARE_GROUP(group) extern wm_event_group_t const group 宏定义的结构: #define:这是C语言中的预处理指令,用来定义宏。宏的作用是替换代码中的特定部分,类似于全局的文本替换。这里定义的宏名称是 WM_EVE…...
java流
99. ByteArrayOutputStream转化为ByteArrayInputStream ByteArrayOutputStream baos xxx;i new ByteArrayInputStream(baos.toByteArray())100.将inputstream转换为byte[] https://blog.csdn.net/yogima/article/details/128500056 100.1 方式一 直接使用IOUtils byte[] …...
Java ArrayList扩容机制 (源码解读)
结论:初始长度为10,若所需长度小于1.5倍原长度,则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义 1:数组默认长度 2:这是一个共享的空数组实例,用于明确创建长度为0时的ArrayList ÿ…...
『功能项目』管理器基类【38】
我们打开上一篇37单例模式框架的项目, 本章要做的事情是编写管理器基类 首先创建脚本:ManagerBase.cs using UnityEngine; public abstract class ManagerBase : MonoBehaviour{public virtual void Init() { } } public class ManagerBase<T> : …...
Flex布局最后一行元素的对齐的解决方案
问题的产生 使用Flex布局,设置justify-content: space-between;让元素在主轴上两队对齐。 <div class"box"><div class"item">1</div><div class"item">2</div><div class"item">3&l…...
【ShuQiHere】上章:计算与计算机的基础概念
【ShuQiHere】✨ 在当今数字化社会,计算机已无处不在,从智能手机到人工智能应用,影响深远。然而,计算机并非一开始就如此强大。它经历了从手动工具、机械装置到电子计算机的演变。本章将回顾计算与算法的基本概念,探讨…...
前端框架有哪些?全面解析主流前端框架
一、React React 是由 Facebook 开发和维护的一个前端框架,它专注于构建用户界面。React 采用组件化的开发模式,允许开发者将用户界面拆分成多个可复用的组件。 主要特点 组件化: React 的核心是组件,它允许开发者将界面拆分成独立的、可复…...
4G MQTT网关在物联网应用中的优势-天拓四方
随着物联网(IoT)技术的飞速发展,各种设备和系统之间的互联互通变得日益重要。MQTT(Message Queuing Telemetry Transport)作为一种轻量级的发布/订阅消息传输协议,因其高效、可靠、简单的特性,在…...
【网上商城项目结构】
文章目录 前言一、网站前台二、运营商后台三、商家管理后台四、系统架构五、数据库设计六、关键技术总结 前言 网上商城项目结构通常包括网站前台、运营商后台和商家管理后台三个子系统,以及多个功能模块,如门户、搜索、购物车、订单、秒杀、个人中心等…...
VMware-Ubuntu Server安装教程
整理了B站和考拉软件上的信息 VMware安装 1.下载完成后,鼠标右击【VMware Workstation Pro 17.5.1】压缩包,选择【解压至此】 2.打开解压后的文件夹,鼠标右击【VMware17.5】选择【以管理员身份运行】 3.点击【下一步】 4.勾选【我接受许可协…...
从hadoop平台下载文件到本地Windows
一、只能上传文件,不能下载 1、原因: 如果在Windows中没有配置hadoop的环境变量,用idea远程连接上hadoop平台之后,只能往hadoop上推送数据文件,并不能下载文件,因为下载时hadoop会检测本地有无hadoop环境配置,所以我们需要安装winutils,在windows本地模拟一个hadoop环…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
