react合成事件与原生事件区别备忘

news/2024/5/18 20:36:40

朋友问起在做一个下拉框组件,下拉的点击事件是用react的onClick触发,外部区域点击关闭则用dom的原生点击事件绑定,问题是下拉的点击事件无法阻止冒泡到dom的原生事件。

我说,react的合成事件 和 原生事件是不一样的,尽可能不要混用,不然很绕。翻开之前在codepen写的demo

https://codepen.io/shellphon-the-encoder/pen/vYPEggK

也把自己绕晕了一下。

react的合成事件,注入onClick等事件,是在根元素上事件代理模拟的。react 16.8.0和之前的版本,是在document上事件代理,react 17则是在root

以demo上的div结构为例:v17.0.2

const {useState, useEffect, useRef} = React;
document.getElementById('root').addEventListener('click', (e) =>{console.log('外部原生root 点击', e);//e.stopPropagation();});
document.addEventListener('click', (e) =>{console.log('外部原生document 点击', e);}); 
const App = () => {const sonRef = useRef(null);const parentRef = useRef(null);const parentClick = (e)=>{console.log('合成事件parent click',e);//e.stopPropagation();};const sonClick = (e)=>{console.log('合成事件son click', e);}const sonClickNo = (e)=>{console.log('合成事件son click并阻止冒泡', e);e.stopPropagation();}useEffect(() => {document.addEventListener('click', (e) =>{console.log('内部原生document click', e);}); document.getElementById('root').addEventListener('click', (e) =>{console.log('内部原生 root click', e);});parentRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref p', e);});sonRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref son', e);});}, [])return <div ref={parentRef} onClick={parentClick}><div onClick={sonClick}>son</div><div onClick={sonClickNo} ref={sonRef}>son no</div></div>
};ReactDOM.render(<App />, document.getElementById('root'));

document>root>div>.parent>.son

son上的onClick(合成事件),实际是react root上的点击事件,在内部做模拟冒泡。

因为demo写的事件比较多,比较绕,所以画了出来。

当只有合成事件的时候,无非就是 son点击响应,然后parent点击响应。

同一个元素的原生事件和合成事件

当往son原生div加click事件时,点击son,会先响应原生click,再然后才是去合成事件,这中间如果parent也有原生click,那也是先原生click再到合成事件去。

如下:

const {useState, useEffect, useRef} = React;const App = () => {const sonRef = useRef(null);const parentRef = useRef(null);const parentClick = (e)=>{console.log('合成事件parent click',e);//e.stopPropagation();};const sonClick = (e)=>{console.log('合成事件son click', e);}const sonClickNo = (e)=>{console.log('合成事件son click并阻止冒泡', e);e.stopPropagation();}useEffect(() => {parentRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref p', e);});sonRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref son', e);});}, [])return <div ref={parentRef} onClick={parentClick}><div onClick={sonClick}>son</div><div onClick={sonClickNo} ref={sonRef}>son no</div></div>
};ReactDOM.render(<App />, document.getElementById('root'));

点击第一个son时:

可以看到先响应了parent的原生事件,然后才到son的合成事件

合成事件和外部root事件的关系

在react外面给root绑定click事件,看合成事件的顺序

const {useState, useEffect, useRef} = React;
document.getElementById('root').addEventListener('click', (e) =>{console.log('外部原生root 点击', e);//e.stopPropagation();});
document.addEventListener('click', (e) =>{console.log('外部原生document 点击', e);}); 
const App = () => {const sonRef = useRef(null);const parentRef = useRef(null);const parentClick = (e)=>{console.log('合成事件parent click',e);//e.stopPropagation();};const sonClick = (e)=>{console.log('合成事件son click', e);}const sonClickNo = (e)=>{console.log('合成事件son click并阻止冒泡', e);e.stopPropagation();}useEffect(() => {parentRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref p', e);});sonRef.current.addEventListener('click', (e) =>{console.log('内部原生事件ref son', e);});}, [])return <div ref={parentRef} onClick={parentClick}><div onClick={sonClick}>son</div><div onClick={sonClickNo} ref={sonRef}>son no</div></div>
};ReactDOM.render(<App />, document.getElementById('root'));

点击第一个son时,先原生事件, 然后 到了外部root绑定的事件,再到合成事件的son、parent,再然后是document

合成事件是在root上模拟的,而外部绑定root的事件和这个合成事件也就是在一个dom上多次绑定事件响应,各不相干,顺序上谁先绑定谁先响应,于是外部root原生先响应,再到合成事件的处理。而document是在root的上层,因此document事件是在最后才响应。

如果在组件周期里也给root加一个原生事件响应,那它会在合成事件完成之后才响应,因为它也是给同一个dom绑定的事件之一,只是晚于合成事件。

回到最开始的demo代码,当在son的onClick上阻止冒泡时,它做了两件事情:

1. 阻止了向上冒泡的模拟

2. 调用了原生事件的阻止冒泡 (解释了合成事件阻止冒泡后,为什么document事件没有响应)

由此,如果朋友在react 17版本上document上绑定的事件应该是能被合成事件阻止冒泡的。

但如果在react 16.8.0 合成事件是在document上绑定,那么额外绑定的document事件不会被合成事件阻止冒泡。

参考资料:

https://github.com/youngwind/blog/issues/107

https://mdnice.com/writing/85c044f9087746dcbd719e4a0b847278


https://dhexx.cn/news/show-5318060.html

相关文章

SkyWalking 为所有的API接口增加 tag

背景胡扯 线上接口报错&#xff0c;接着被 SkyWalking 抓到&#xff0c;然后 SkyWalking 触发告警&#xff0c;最后老板你&#xff0c;让你辛苦一下&#xff0c;在明早上班前把这个bug 改了&#xff0c;并告诉你你是全公司的希望。谁说不是呢&#xff1f;为公司业务保驾护航&a…

使用Google reCAPTCHA防止机器注册

本文作者&#xff1a;陈进坚 博客地址&#xff1a;https://jian1098.github.io CSDN博客&#xff1a;https://blog.csdn.net/c_jian 简书&#xff1a;https://www.jianshu.com/u/8ba9ac5706b6 联系方式&#xff1a;jian1098qq.com 环境要求 能翻墙的电脑域名 验证原理 在谷歌…

xhci 数据结构

xhci 数据结构 xhci 数据结构主要在手册上有详细的定义&#xff0c;本文根据手册进行归纳总结&#xff1a; 重点关注的包括&#xff1a; device contexttrb ringtrb device context设备上下文 设备上下文数据结构由xHC管理&#xff0c;用于向系统软件报告设备配置和状态信息。…

URL的绝对路径/相对路

一、URL 浏览器要想发起请求,必须是一个完整的url地址. URL是一个固定格式的字符串 它表达了&#xff1a; 从网络中 哪台计算机&#xff08;domain&#xff09; 中的 哪个程序&#xff08;port&#xff09; 寻找 哪个服务&#xff08;path&#xff09;&#xff0c;并注明了…

Python(九十四)变量的作用域

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

CTFHUB-技能树-Web前置技能-文件上传(前端验证—文件头检查)

CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—文件头检查&#xff09; 文章目录 CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—文件头检查&#xff09;前端验证—文件头检查题目解析 各种文件头标志 前端验证—文件头检查 题目考的是&#xff1a;pn…

[Win11·Copilot] Win11 系统更新重启后任务栏 Copilot 图标突然消失 | 解决方案

文章目录 前言Copilot介绍产生异常的原因解决方案总结 前言 在 Windows 11 的最新系统更新之后&#xff0c;一些用户报告了任务栏中 Copilot 图标消失的问题。这篇技术博文将为您提供详细的解决方案&#xff0c;帮助您恢复 Copilot 图标&#xff0c;并确保您能够继续享受 Copi…

解决宝塔的FTP无法使用被动模式

问题&#xff1a;宝塔安装完ftp管理软件之后&#xff0c;无法使用被动模式连接 解决&#xff1a; 提示&#xff1a; 如果还是不行&#xff0c;那么要看看防火墙和安全组有没有放行被动模式的端口&#xff0c;宝塔安装的pure-ftpd软件的被动模式端口默认是39000至400…

linux进阶篇:重定向和管道操作

Linux中的重定向和管道操作 llinux中的三种IO设备&#xff1a; 标准输入&#xff08;STDIN&#xff09;,文件描述符号为&#xff1a;0&#xff0c;默认从键盘获取输入 标准输出&#xff08;STDOUT&#xff09;,文件描述符号位&#xff1a;1&#xff0c;默认输出到显示终端 标准…

vim相关指令

vim的各种模式及其转换关系图 vim 默认处于命令模式&#xff01;&#xff01;&#xff01; 模式之间转换的指令 除【命令模式】之外&#xff0c;其它模式要切换到【命令模式】&#xff0c;只需要无脑 ESC 即可&#xff01;&#xff01;&#xff01; [ 命令模式 ] 切换至 [ 插…