当前位置: 首页 > news >正文

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自身实现了一套自己的事件机制&#xff0c;包括事件注册、事件的合成、事件冒泡、事件派发等&#xff0c;虽然和原生的是两码事&#xff0c;但也是基于浏览器的事件机制下完成的。 react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上&#xff0c;然后由…...

【Java】Runtime与Properties获取系统信息

Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容&#xff1a;三、问题描述四、解决方案&#xff1a;4.1 代码4.2 运行结果 五、总结&#xff1a; 一、前言 这些都被淘汰比较少用了…...

基于SpringBoot的社团管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、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)

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 轻内核A核源码分析系列一 数据结构-双向循环链表 轻内核A核源码分析系列二 数据结构-位图操作 轻内核A核源码分析系列三 物理内存&#xff08;1&#xff0…...

qt QGraphicsScene场景坐标和场景内GraphicsItem局部坐标的相互转换

为了更清晰地解释场景坐标与局部坐标之间的转换过程&#xff0c;我们可以通过一个简单的实例来演示如何赋值场景坐标&#xff0c;并将其转换为图形项的局部坐标。 实例步骤 假设我们有一个场景 QGraphicsScene 和一个矩形图形项 QGraphicsRectItem&#xff0c;矩形的大小为 1…...

Windows与linux中docker的安装与使用

windos中安装使用docker 下载Docker_Desktop 安装包进入docker官网下载Docker_Desktop&#xff1a; https://www.docker.com/启用wsl 我们搜索“启用或关闭Windows功能”&#xff0c;打开后勾选适用于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

沟通&#xff1a; 想明⽩&#xff0c;说清楚&#xff0c;能接受 团队沟通的正确⽅式可以⽤9个字来概括&#xff1a;想明⽩&#xff0c;说清楚&#xff0c;能接受 &#xff08;⻅图4-1&#xff09;想明⽩ 有时经理跟⼈沟通&#xff0c;讲完之后却⽆奈地对员⼯说&#xff0c;你怎…...

带参宏定义

#define WM_EVENT_DECLARE_GROUP(group) extern wm_event_group_t const group 宏定义的结构&#xff1a; #define&#xff1a;这是C语言中的预处理指令&#xff0c;用来定义宏。宏的作用是替换代码中的特定部分&#xff0c;类似于全局的文本替换。这里定义的宏名称是 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扩容机制 (源码解读)

结论&#xff1a;初始长度为10&#xff0c;若所需长度小于1.5倍原长度&#xff0c;则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义 1&#xff1a;数组默认长度 2:这是一个共享的空数组实例&#xff0c;用于明确创建长度为0时的ArrayList &#xff…...

『功能项目』管理器基类【38】

我们打开上一篇37单例模式框架的项目&#xff0c; 本章要做的事情是编写管理器基类 首先创建脚本&#xff1a;ManagerBase.cs using UnityEngine; public abstract class ManagerBase : MonoBehaviour{public virtual void Init() { } } public class ManagerBase<T> : …...

Flex布局最后一行元素的对齐的解决方案

问题的产生 使用Flex布局&#xff0c;设置justify-content: space-between;让元素在主轴上两队对齐。 <div class"box"><div class"item">1</div><div class"item">2</div><div class"item">3&l…...

【ShuQiHere】上章:计算与计算机的基础概念

【ShuQiHere】✨ 在当今数字化社会&#xff0c;计算机已无处不在&#xff0c;从智能手机到人工智能应用&#xff0c;影响深远。然而&#xff0c;计算机并非一开始就如此强大。它经历了从手动工具、机械装置到电子计算机的演变。本章将回顾计算与算法的基本概念&#xff0c;探讨…...

前端框架有哪些?全面解析主流前端框架

一、React React 是由 Facebook 开发和维护的一个前端框架&#xff0c;它专注于构建用户界面。React 采用组件化的开发模式&#xff0c;允许开发者将用户界面拆分成多个可复用的组件。 主要特点 组件化: React 的核心是组件&#xff0c;它允许开发者将界面拆分成独立的、可复…...

4G MQTT网关在物联网应用中的优势-天拓四方

随着物联网&#xff08;IoT&#xff09;技术的飞速发展&#xff0c;各种设备和系统之间的互联互通变得日益重要。MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为一种轻量级的发布/订阅消息传输协议&#xff0c;因其高效、可靠、简单的特性&#xff0c;在…...

【网上商城项目结构】

文章目录 前言一、网站前台二、运营商后台三、商家管理后台四、系统架构五、数据库设计六、关键技术总结 前言 网上商城项目结构通常包括网站前台、运营商后台和商家管理后台三个子系统&#xff0c;以及多个功能模块&#xff0c;如门户、搜索、购物车、订单、秒杀、个人中心等…...

VMware-Ubuntu Server安装教程

整理了B站和考拉软件上的信息 VMware安装 1.下载完成后&#xff0c;鼠标右击【VMware Workstation Pro 17.5.1】压缩包&#xff0c;选择【解压至此】 2.打开解压后的文件夹&#xff0c;鼠标右击【VMware17.5】选择【以管理员身份运行】 3.点击【下一步】 4.勾选【我接受许可协…...

从hadoop平台下载文件到本地Windows

一、只能上传文件,不能下载 1、原因: 如果在Windows中没有配置hadoop的环境变量,用idea远程连接上hadoop平台之后,只能往hadoop上推送数据文件,并不能下载文件,因为下载时hadoop会检测本地有无hadoop环境配置,所以我们需要安装winutils,在windows本地模拟一个hadoop环…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...