程序员经验分享-hwhale

React事件处理机制

2023-11-06

1.react事件并没有绑定到dom节点上而是绑定到了document，然后由统一的事件处理程序来处理，同时基于浏览器的事件冒泡机制，所有节点的事件会在document上触发

2.原生事件阻止冒泡会阻止合成事件的触发 合成事件的阻止冒泡不会影响原生事件

3.浏览器的事件执行顺序 捕获-目标元素-冒泡 节点上的原生事件执行在目标阶段，合成事件则执行在冒泡阶段

原生事件的阻止会影响合成事件 合成事件的阻止不会影响原生事件

4.react合成事件的意义: 减少内存消耗,提升性能，一种事件类型只在document上执行一次;统一规范，解决IE事件兼容性

5.对合成事件的理解 :react基于原生事件进行的封装，对一些原生事件进行了升级和改造,以及不通浏览器兼容的处理

6.事件注册机制:事件注册及事件存储

a.事件注册:组件挂载阶段,根据组件内的事件类型，通过addEventListener给document添加事件,并指定统一的事件处理程序dispatchEvent

b.事件存储:把react组件内的所有事件统一存放到一个对象里,缓存起来,在触发对应事件的时候找到对应的方法去执行

7.事件执行机制:

a:进入统一的事件分发函数(dispatchEvent)

b:结合原生事件找到当前节点对应的ReactDomComponent对象

c:开始事件的合成:根据当前事件类型生成指定的合成对象,封装原生事件和冒泡机制,查找当前元素及他的父级,在listenerBank对象中查找事件回掉并合成到event

d:批量处理合成事件内的回调事件

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

javascript

html

React事件处理机制 的相关文章

随机推荐

  • 主题：java并发编程-Executor框架

    http www iteye com topic 366591

  • 【Opencv读取中文路径图像】

    Opencv读取中文路径图像 if img0 None uipath unicode path utf8 img data np fromfile path np uint8 img0 cv2 imdecode img data 1

  • Python~OS模块--将文件保存到指定路径

    需求 写爬虫时 想将爬取下来的文件保存到指定的路径 环境 Python3 7 注意 windows下 用于区分系统路径 在python里面是转义符 os listdir 返回指定目录下的所有目录和文件名 os mkdir 创建指定路径下目录

  • 一维条码解码

    一维条码是一种能用于信息编码和信息自动识别的标准符号 是由一组宽度不同的黑白符号按一定规则交替排列编码组成的图形符号可用于表示一定的信息 它是对物品进行代号标识需要依赖数据库或通讯网络才能发挥最大的作用 常见的码制 条码符号类型 有EAN

  • Nacos踩坑记录之The IPv4 address(“nacos.xxxx.local“) is incorrect

    版本 spring cloud alibaba 2021 1 项目构建工具 gradle nacos server 2 0 3 1 问题 昨天早上上班来了之后 运营的同事着急的过来说生产环境登不上了 我赶紧打开日志看了之后 就发现了这样的报

  • C语言期末大作业-运动会管理系统 包含源码和设计文档

    C语言 运动会管理系统 源码和3000多字的设计文档非常详细 代码注释非常详细 部分功能测试截图如下 下载链接在文末 点我下载资源 https download csdn net download weixin 43474701 60281

  • 多线程练习-基于 AtomicInteger 实现多线程自增同一个变量

    Atomic原子类有很多的类型 由于有原子性 所以实例化的变量在多线程中不会有线程安全问题 感兴趣的可以搜索 题目 基于 AtomicInteger 实现多线程自增同一个变量 代码及其注释 基于 AtomicInteger 实现多线程自增同

  • 蓝桥杯C++算法训练-拿金币（动态规划）

    问题描述 有一个N x N的方格 每一个格子都有一些金币 只要站在格子里就能拿到里面的金币 你站在最左上角的格子里 每次可以从一个格子走到它右边或下边的格子里 请问如何走才能拿到最多的金币 输入格式 第一行输入一个正整数n 以下n行描述该方

  • FPGA基本算术运算

    FPGA基本算术运算 FPGA基本算术运算 1 有符号数与无符号数 2 浮点数及定点数 I 定点数的加减法 II 定点数的乘除法 3 仿真验证 i 加减法验证 ii 乘除法验证 FPGA基本算术运算 FPGA相对于MCU有并行计算 算法效率

  • 生成对抗网络（GAN) 手写数字图像生成

    生成式对抗网络 GAN 简介 生成式对抗网络的框架主要有两个模型 一个是生成模型 Generator 记为为 G 是用来生成数据 通过大量的样本学习 生成一些能够以假乱真的数据样本 第二个是辨别模型 Discriminator 记为D 主要

  • CCF 2014年9月第一题--相邻数对(java)

    package com hsx ccf import java util Scanner public class Ccf20140901 public static void main String args SuppressWarnin

  • 注解和反射

    一 注解 1 什么是注解 注解说白了就是对程序做出解释 与我们在方法 类上的注释没有区别 但是注解可以被其他程序所读取 进行信息处理 否则与注释没有太大的区别 2 内置注解 内置注解就是我们的jdk所带的一些注解 常用的三个注解 Overr

  • 基于支持向量机SVM的图像多分类，SVM的详细原理

    目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 SVM应用实例 SVM图像多分类 代码 结果分析 展望 参考 支持向量机SVM的详细原理 SVM的定义 支持向量机 support vector machines SVM 是一种二

  • 软件模拟IIC驱动OLED 附源码

    软件模拟IIC驱动OLED 附源码 前言 CSDN上有很多的关于模拟IIC驱动的代码 都讲解的特别好 但对于想短时间理解并使用IIC的同学们而言是很枯燥困难的 所以我想由果到因 从写好的代码开始讲解IIC 希望可以帮助大家短时间掌握使用II

  • Springcloud连接nacos集群，nacos地址配置为nginx，报错：requst nacos server failed

    先说下版本 Spring cloud Hoxton SR12 spring cloud alibaba 2 2 9 RELEASE spring boot 2 3 12 RELEASE Linux Centos7 nacos server

  • 惠普Hp 战66 g3 amdR7-4800U，USB接口以及type-C速率/功能

    https h30471 www3 hp com t5 bi ji ben dian nao zhan66 san dai AMD14ying cun ban quan gong nengusbtypec jie kou zhi chi n

  • 【用户增长】找到用户增长的根本动因

    找到用户增长的根本动因 1 没有痛点的用户增长是不持久的 近几年创业的人越来越多 在这些创业失败的案例中 不乏一些 UI 设计非常漂亮的产品 但最终却因为用户增长做不起来而导致创业失败 这些产品失败的最主要原因就是没有找对痛点 没有需求也就

  • mysql内存使用分析(一)

    author skate time 2012 02 16 mysql内存使用分析 从内存的使用方式来说 MySQL数据库的内存使用主要分为以下两类 1 线程独享内存 2 全局共享内存 1 线程独享内存 在MySQL 中 线程独享内存主要用于

  • ledcode----丢失的数字

    目录 题目截图 题目接口 第一种解法 思路 第二种解法 差值法 思路 第三种解法 位运算异或法 关于异或操作符的预备知识 思路 例子 输入数组 0 1 3 根据题目要求消失的数字就是2 n 3 结语 题目截图 题目接口 int missin

  • React事件处理机制

    1 react事件并没有绑定到dom节点上而是绑定到了document 然后由统一的事件处理程序来处理 同时基于浏览器的事件冒泡机制 所有节点的事件会在document上触发 2 原生事件阻止冒泡会阻止合成事件的触发 合成事件的阻止冒泡不会

热门标签