React 合成事件理解

news2024/11/16 17:34:57

1 事件三个阶段 捕获、目标、处理 （具体百度，后面有空补全）

2

import React from "react";

class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}

export default Test;

执行顺序

只留子元素修改代码

import React from "react";

class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    // this.parentRef.current.addEventListener(
    //   "click",
    //   () => {
    //     console.log(`父元素原生事件捕获`);
    //   },
    //   true
    // );
    // this.parentRef.current.addEventListener("click", () => {
    //   console.log(`父元素原生事件冒泡`);
    // });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  // handleParentBubble = () => {
  //   console.log(`父元素React事件冒泡`);
  // };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  // handleParentCapture = () => {
  //   console.log(`父元素React事件捕获`);
  // };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.childRef}
        onClick={this.handleChildBubble}
        onClickCapture={this.handleChileCapture}
      >
        事件处理测试
      </div>
    );
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}

export default Test;

document原生事件捕获--》子元素React事件捕获--》子元素原生事件捕获--》子元素原生事件冒泡

--》子元素React事件冒泡--》document原生事件冒泡

从这个执行顺序来看，react事件捕获执行比原生事件捕获早，但是原生事件冒泡执行比react事件冒泡快。

所有的react捕获事件执行完毕之后才会去执行原生的捕获事件（document原生事件捕获最先执行）

3 子元素阻止react事件冒泡

e.stopPropagation();

import React from "react";

class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    e.stopPropagation();
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}

export default Test;

执行顺序

e.stopPropagation()只能阻止react合成事件的冒泡和document原生事件冒泡，并不能阻止自己和父元素原生事件的冒泡。

e.nativeEvent.stopImmediatePropagation()只能阻止document原生事件冒泡。

e.preventDefault()和不执行一样

e.nativeEvent.stopPropagation()只能阻止document原生事件冒泡。

如果我们在子原生的原声事件里面阻止冒泡，都阻止了。

import React from "react";

class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}

export default Test;

执行顺序

在子元素的原声事件里面，阻止了所有的冒泡。同时也阻止了react事件。

在父元素原生事件中阻止冒泡

import React from "react";

class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", (e) => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}

export default Test;

执行顺序

父元素原生事件中阻止冒泡阻止了react事件

阻止document原生事件的冒泡并不会阻止了react事件

 document.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log(`document原生事件冒泡`);
 });

结论

react捕获事件快于原生捕获事件的执行

react冒泡事件慢于原生冒泡事件的执行

原生冒泡事件会阻止react事件。

TODO

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/354879.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

前言 前段时间&#xff0c;电脑忽然出现了问题&#xff0c;首先是通过 微软应用商店 Microsoft Store 下载安装的 Snipaste 截图软件崩溃&#xff0c;不过将其卸载后&#xff0c;通过电脑管家下载后又可以正常使用了。 之后就是突然发现&#xff0c;记事本文本文档不能使用了…
阅读更多...
分享112个HTML娱乐休闲模板，总有一款适合您

分享112个HTML娱乐休闲模板，总有一款适合您

分享112个HTML娱乐休闲模板&#xff0c;总有一款适合您 112个HTML娱乐休闲模板下载链接&#xff1a;https://pan.baidu.com/s/15uBy1SVSckPPMM55fiudeQ?pwdkqfz 提取码&#xff1a;kqfz Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 Bootstrap视频网站模板 …
阅读更多...
Terraform基础入门 (Infrastructure as Code)

Terraform基础入门 (Infrastructure as Code)

文章目录前言介绍Terraform 术语Terraform 如何工作关于provider安装开启本地缓存demo1(dockernginx)demo2(dockerzookeeperkafka)参考资料前言 像写代码一样管理基础设施。 Terraform 使用较为高级的配置文件语法来描述基础设施&#xff0c;这个特性让你对配置文件进行版本化…
阅读更多...
Ubuntu升级cmake

Ubuntu升级cmake

目录 1、下载cmake安装包 2、开始安装 3、查看cmake版本 参考链接&#xff1a; https://blog.csdn.net/qq_27350133/article/details/121994229 1、下载cmake安装包 cmake安装包下载&#xff1a;download | cmake 我们根据自身需求下载所需版本的cmake安装包&#xff0c;这…
阅读更多...
万字干货 | 荔枝魔方基于云原生的架构设计与实践

万字干货 | 荔枝魔方基于云原生的架构设计与实践

近年来&#xff0c;荔枝集团在国内和海外的业务迅速发展&#xff0c;业务数据规模也是成几何式地增长&#xff0c;海量数据的计算分析场景、业务智能算法应用需求随之而生&#xff0c;为了快速地满足业务发展的需要&#xff0c;我们面临着诸多的技术挑战。技术挑战工程问题资源…
阅读更多...
计算机如何思考与图灵完备

计算机如何思考与图灵完备

图灵完备是针对一套数据操作规则而言的概念，数据操作规则可以是一门编程语言，也可以是计算机实现里面的指令集，比如C/C++是图图灵完备的，通用CPU也是图灵完备的，但是GPU却不一定是图灵完备的。说白了图灵完备定义了一套规则，当这套规则可以实现图灵迹模型里的全部功能时，…
阅读更多...
Unreal Engine09：自定义Pawn运动组件

Unreal Engine09：自定义Pawn运动组件

写在前面 这里介绍一下如何为Pawn定制自定义的运动组件。 一、新建一个运动组件C类 需要在Editor中新建类&#xff0c;不要直接Visual Studio中新建&#xff1b;Pawn的运动组件继承自UPawnMovementComponent&#xff0c;需要勾选显示所有类才能找到&#xff1b; 初始时&…
阅读更多...
【PowerQuery】PowerBI 的PowerQuery支持的数据集成

【PowerQuery】PowerBI 的PowerQuery支持的数据集成

PowerBI中的各个Power组件已经被深度集成到PowerBI中，不再作为像Excel一样的独立组件而存在。在PowerBI的界面中为了快速导入这些常用的数据，也有相应的快速导入界面。PowerBI的快速导入界面位于主页面中，下图就是PowerBI的快速导入界面。 在PowerBI中的数据导入界面相比Exc…
阅读更多...
Leetcode.958 二叉树的完全性检验

Leetcode.958 二叉树的完全性检验

题目链接 Leetcode.958 二叉树的完全性检验 Rating : 1703 题目描述 给定一个二叉树的 root&#xff0c;确定它是否是一个 完全二叉树 。 在一个 完全二叉树 中&#xff0c;除了最后一个关卡外&#xff0c;所有关卡都是完全被填满的&#xff0c;并且最后一个关卡中的所有节点…
阅读更多...
【郭东白架构课 模块一：生存法则】11｜法则五：架构师为什么要关注技术体系的外部适应性？

【郭东白架构课 模块一：生存法则】11｜法则五：架构师为什么要关注技术体系的外部适应性？

你好&#xff0c; 我是郭东白。 前四条法则分别讲了目标、资源、人性和技术周期&#xff0c;这些都与架构活动的外部环境有关。那么今天我们来讲讲在架构活动内部&#xff0c;也就是在架构师可控的范围内&#xff0c;应该遵守哪些法则。今天这节课&#xff0c;我们就先从技术体…
阅读更多...
乡村振兴研究：全网最全指标农村经济面板数据（2000-2021年）

乡村振兴研究：全网最全指标农村经济面板数据（2000-2021年）

数据来源&#xff1a;国家统计局 时间跨度&#xff1a;2000-2021年 区域范围&#xff1a;全国31省 指标说明&#xff1a; 部分样例数据&#xff1a; 行政区划代码地区年份经度纬度乡镇数(个)乡数(个)镇数(个)村民委员会数(个)乡村户数(万户)乡村人口(万人)乡村从业人员(万人…
阅读更多...
通过4个月的自动化学习，现在我也拿到了25K的offer

通过4个月的自动化学习，现在我也拿到了25K的offer

毕业后的5年&#xff0c;是拉开职场差距的关键时期。有人通过这5年的努力&#xff0c;实现了大厂高薪&#xff0c;有人在这5年里得到贵人的赏识&#xff0c;实现了职级的快速拔升&#xff0c;还有人在这5年里逐渐掉队&#xff0c;成了职场里隐身一族&#xff0c;归于静默。 而…
阅读更多...
如何高效远程维护分布在海外的中大型智能设备？

如何高效远程维护分布在海外的中大型智能设备？

一、行业需求 随着越来越多的企业进行全球化经营&#xff0c;设备制造商和系统集成商的设备分布到全球各地&#xff0c;数量多而且分散&#xff0c;传统的设备运维方式&#xff0c;面临着出差成本高&#xff0c;工作效率低&#xff0c;服务不及时等问题&#xff0c;客户常常因…
阅读更多...
华为手表开发：WATCH 3 Pro（8）获取位置服务

华为手表开发：WATCH 3 Pro（8）获取位置服务

华为手表开发&#xff1a;WATCH 3 Pro&#xff08;8&#xff09;获取位置服务初环境与设备文件夹&#xff1a;文件新增第二页面geolocation.hmlgeolocation.js修改首页 -> 新建按钮 “ 跳转 ”index.hmlindex.js 引用包&#xff1a;system.router首页效果点击结果按钮跳转后…
阅读更多...
【Linux详解】——文件基础（I/O、文件描述符、重定向、缓冲区）

【Linux详解】——文件基础（I/O、文件描述符、重定向、缓冲区）

&#x1f4d6; 前言&#xff1a;本期介绍文件基础I/O。 目录&#x1f552; 1. 文件回顾&#x1f558; 1.1 基本概念&#x1f558; 1.2 C语言文件操作&#x1f564; 1.2.1 概述&#x1f564; 1.2.2 实操&#x1f564; 1.2.3 OS接口open的使用&#xff08;比特位标记&#xff09;…
阅读更多...
【Java基础】023 -- 集合进阶（List、Set、泛型、树）

【Java基础】023 -- 集合进阶（List、Set、泛型、树）

目录 一、集合的体系结构 1、单列集合&#xff08;Collection&#xff09; 二、Collection集合 1、Collection常见方法 ①、代码实现&#xff1a; ②、contains方法重写equals方法示例&#xff1a;&#xff08;idea可自动重写&#xff09; 2、Collection的遍历方式&#xff08;…
阅读更多...
拂晓·微信机器人

拂晓·微信机器人

前言 本项目是基于千寻微信框架进行的功能开发&#xff0c;采用SpringBoot青云客机器人进行开发。 千寻初衷是想开源一个框架的写法&#xff0c;并不是为了用来运营&#xff0c;因此功能不全&#xff0c;所以使用和适配前请查看是否与自己需求匹配。 因此本文主要通过千寻客…
阅读更多...
JVM详解——类的加载

JVM详解——类的加载

文章目录类的加载1、Java程序如何运行2、Java字节码文件3、类加载4、类加载的过程5、类加载器6、类的加载方式7、类的加载机制8、双亲委派机制9、破坏双亲委派机制类的加载 1、Java程序如何运行 首先通过Javac命令将.java文件编译生成.class字节码文件。 Javac是Java编译命令&a…
阅读更多...
【IOS逆向】frida-trace小计

【IOS逆向】frida-trace小计

【IOS逆向】frida-trace小计 当越狱完成之后&#xff0c;可以尝试品尝下frida frida-trace 用于跟踪函数或者 Objective-C 方法的调用&#xff0c;frida-trace -h 能够查看它的帮助&#xff0c;最重要的有下面几个参数&#xff1a; -i 跟踪某个函数&#xff0c;-x 排除某个函…
阅读更多...
链表OJ（三） 反转链表合集

链表OJ（三） 反转链表合集

目录 反转链表 反转链表 II 链表中的节点每k个一组翻转 描述 给定一个单链表的头结点pHead(该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1)&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 数据范围&#xff1a; 0≤n≤10000≤…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023