原生DOM事件、react16、17和Vue合成事件

目录

原生DOM事件

注册/绑定事件

按DOM事件级别分类,越小越高

DOM0:onclick传统注册:

唯一(同元素的(不)同事件会覆盖)

没有捕获和冒泡的,只有简单的事件绑定

DOM2:addEventListener监听注册:可添加多个,优先级低于传统注册,IE9以上

引入了事件捕获、冒泡阶段

元素.addEventListener(事件类型type,执行函数handler[,ueseCapture捕获true/false]) 默认值为false(即 使用事件冒泡)

DOM3:对 DOM 2 级事件的扩展。

引入事件类型,如 input、change 等

加入特性

异步执行:

自定义事件:CustomEvent构造函数 创建, dispatchEvent 方法触发

事件的停止:stopPropagation(),preventDefault()

DOM事件流:捕获->冒泡(默认)

不支持冒泡:与用户界面交互或设备输入相关

焦点、鼠标进出、加载/卸载、尺寸、表单改变(/提交/重置)

阻止事件

DOM树上的传播(捕获/冒泡):event.stopPropagation()

阻止剩下同事件+event.stopPropagation():event.stopImmediatePropagation()

默认行为(链接的跳转、表单的提交):event.preventDefault():

事件处理位置/DOM元素上的handler值

原生事件:事件处理函数

React:nonp空函数

事件被分解后绑定在document

React17事件统一绑定container

事件保存在fiberNode对象的memoizedProps 和 pendingProps属性中

1.事件注册(浏览器):初始化事件参数

1.事件合成:用插件机制 初始化事件参数+映射原生事件类型

2.事件绑定:注册监听器,绑定 dispatchEvent统一事件处理

3.事件触发:批量更新处理

Vue

与react区别:不暴露给开发者

绑定处理:模板和指令(@)


原生事件和合成事件的e.preventDefault()并非是同一个函数

原生DOM事件

注册/绑定事件

DOM事件级别

DOM0:onclick传统注册:
唯一(同元素的(不)同事件会覆盖)
没有捕获和冒泡的,只有简单的事件绑定
// 第一种
    <button onclick="console.log(1)">点击</button>

// 第二种
    <button id="btn">点击</button>

    const btn = document.querySelector('#btn')
    btn.onclick = function () {}
DOM2:addEventListener监听注册:可添加多个,优先级低于传统注册,IE9以上
引入了事件捕获、冒泡阶段
元素.addEventListener(事件类型type,执行函数handler[,ueseCapture捕获true/false]) 默认值为false(即 使用事件冒泡
   <button id="btn">点击</button>
   
   const btn = document.querySelector('#btn')
   btn.addEventListener('click', () => {})
DOM3:对 DOM 2 级事件的扩展。
引入事件类型,如 inputchange
加入特性
异步执行:
element.addEventListener('click', function(event) {
  setTimeout(function() {
    // 异步执行的代码
    console.log('异步执行的代码');
  }, 0);
});
自定义事件:CustomEvent构造函数 创建, dispatchEvent 方法触发
// 创建自定义事件
var customEvent = new CustomEvent('myEvent', { detail: { key: 'value' } });

// 添加事件监听器
element.addEventListener('myEvent', function(event) {
  console.log('自定义事件触发了', event.detail.key);
});

// 触发自定义事件
element.dispatchEvent(customEvent);
事件的停止:stopPropagation(),preventDefault()

DOM事件流:捕获->冒泡(默认)

  • 事件捕获:由外往内,从事件发生的根节点开始,逐级往下查找,一直到目标元素。
  • 事件冒泡:由内往外,从具体的目标元素触发,逐级向上传递,直到根节点
element.addEventListener(event, function[, useCapture]);
//useCapture 默认为false,即冒泡阶段调用事件处理函数,
//为ture时,在事件捕获阶段调用处理函数

事件队列:捕获事件,将 unShift到执行队列的前面,冒泡事件,将 push 到执行队列后面 

执行顺序

具体的元素>层级高document(包括react16事件委托)
同层级的按注册顺序

不支持冒泡:与用户界面交互或设备输入相关

焦点、鼠标进出、加载/卸载、尺寸、表单改变(/提交/重置)

  1. focusblur 事件:这些事件与元素获得或失去焦点相关,通常不会冒泡到父元素。

  2. mouseentermouseleave 事件:这些事件在鼠标指针进入或离开元素时触发,不会冒泡。

  3. load 事件:当页面或资源加载完成时触发,不会冒泡到父元素。

  4. unload 事件:在页面即将卸载时触发,不会冒泡。

  5. resize 事件:当浏览器窗口大小改变时触发,不会冒泡。

  6. submit 事件:当表单提交时触发,通常不会冒泡到父元素。

  7. reset 事件:当表单重置时触发,不会冒泡。

  8. change 事件:当用户改变表单元素的值时触发,通常在元素自身上触发而不会冒泡。

阻止事件

DOM树上的传播(捕获/冒泡):event.stopPropagation()

<div id="parent">
  <button id="myButton">Click me</button>
</div>

<script>
const parent = document.getElementById('parent');
const button = document.getElementById('myButton');

parent.addEventListener('click', function(event) {
  console.log('Parent handler');
});

button.addEventListener('click', function(event) {
  console.log('Button handler');
  event.stopPropagation();
});
</script>

阻止剩下同事件+event.stopPropagation():event.stopImmediatePropagation()

如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加顺序被调用

如果在其中一个事件监听器中执行 stopImmediatePropagation() ,那么剩下的事件监听器都不会被调用。

<button id="myButton">Click me</button>

<script>
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('First handler');
  event.stopImmediatePropagation();
});

button.addEventListener('click', function(event) {
  console.log('Second handler');
});

button.addEventListener('click', function(event) {
  console.log('Third handler');
});
</script>

默认行为(链接的跳转、表单的提交):event.preventDefault():

<a id="myLink" href="https://www.example.com">Click me</a>

<script>
const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
  console.log('Link clicked');
  event.preventDefault(); // 阻止链接的跳转
});
</script>

事件处理位置/DOM元素上的handler值

原生事件:事件处理函数

React:nonp空函数

button上绑定了两个事件

document上的事件监听器,

button,但是事件处理函数handle,并不是我们的handerClick事件,而是noop

事件被分解后绑定在document

onClick分解:click(事件类型)

onChange分解:blur , change , input , keydown , keyup 

将事件绑定在document统一管理是为了跨浏览器包装

React17事件统一绑定container

ReactDOM.render(app, container);绑定在rootNode

因为微前端一个前端系统中可能有多个应用

事件保存在fiberNode对象的memoizedProps 和 pendingProps属性中

事件池:创建/回收->数组弹出

当事件被频繁的创建和回收,会影响性能

React事件池中事件并不会被释放,而是存入到一个数组中,如果这个事件触发,则直接在这个数组中弹出即可,这样就避免了频繁创建和销毁

1.事件注册(浏览器):初始化事件参数

1.事件合成:用插件机制 初始化事件参数+映射原生事件类型

2.事件绑定:注册监听器,绑定 dispatchEvent统一事件处理

 scorll,focus,blur等是在事件捕获阶段发生的,其他的都是在事件冒泡阶段发生的

3.事件触发:批量更新处理

Vue

与react区别:不暴露给开发者

绑定处理:模板和指令(@)

「react进阶」一文吃透react事件系统原理 - 掘金

合成事件 – React

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis反射核心类Reflector

Reflector类负责对一个类进行反射解析&#xff0c;并将解析后的结果在属性中存储起来。 一个类反射解析后都有哪些属性呢&#xff1f;我们可以通过Reflector类定义的属性来查看 public class Reflector {// 要被反射解析的类private final Class<?> type;// 可读属性列…

【聚类 | K-means】原理及推导流程(附模板代码,库手撕实现)

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

shell脚本 ( 函数 数组 冒泡排序)

目录 什么是函数 使用函数的方法 格式 注意事项 函数的使用 函数可以直接使用 函数变量的作用范围 函数返回值 查看函数 删除函数 函数的传递参数 使用函数文件 ​编辑 拓展递归函数 例&#xff1a;求5的阶乘 什么是数组 使用数组的方法 1.先声明 2.定义数组 3…

MQTT客户端MQTT.fx 1.7.1下载、安装和界面介绍

MQTT.fx是一款基于Eclipse Paho&#xff0c;使用Java语言编写的MQTT客户端工具。支持通过Topic订阅和发布消息&#xff0c;用来前期和物理云平台调试非常方便。 1.下载 1.1.访问官方下载地址下载&#xff0c;但是下载不到1.7.1版本 1.2.在连接网页末尾点击立即下载&#xff0c;…

思维模型 古烈治效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。见异思迁。 1 古烈治效应的应用 1.1 古烈治效应之心理学研究 在一项研究中&#xff0c;研究者让男性和女性参与者分别观看一系列异性的照片&#xff0c;并评估他们的吸引力。在观看完所有…

(三) Windows 下 Sublime Text 3 配置Python环境和Anaconda代码提示

一&#xff1a;新建一个 Python3.7 编译环境。 1 Tools--Build System--New Build System... 修改前&#xff1a; 修改后&#xff1a; 内容&#xff1a; {"cmd":["C:\\Python\\Python37-32\\python.exe","-u","$file"],"file_r…

Java基于springboot+vue开发服装商城小程序

演示视频&#xff1a; 小程序 https://www.bilibili.com/video/BV1rM411o7m4/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 管理员 https://www.bilibili.com/video/BV1fc411D7V3/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae…

CV计算机视觉每日开源代码Paper with code速览-2023.11.21

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构&#xff1a;Transformer】Multi-entity Video Transformers for Fine-Grained Video Representation Learning 论文地址&…

WordPress最廉价优化整站的加载速度

为什么说一个站不优化就等于一个人做整个团队的事务导致项目进展慢&#xff0c;网站也是如此 图片、静态文件、php分离加速&#xff0c;加载速度并不是很快但是很协调比单个网站加载速度快许多 一、图片单域名加载设置上传文件路径和域名 以下代码添加在主题目录&#xff1a;fu…

大数据基础 HDFS客户端操作

一、Maven概述 Maven是一个专门用于管理和构建Java项目的工具。我们之所以要使用Maven&#xff0c;是因为Maven可以为我们提供一套标准化的项目结构、一套标准化的构建流程和一套方便的依赖管理机制&#xff0c;这些功能可以使得我们的项目结构更加清晰&#xff0c;导入jar包的…

Effective Modern C++(1.顶层const与底层const)

1.顶层const与底层const的定义 const修饰的变量不可以改变&#xff0c;那么他就是顶层const&#xff0c;如&#xff1a; const int a 10; 那么&#xff0c;对于 const int *const p new int(10); 第二个const就是顶层const&#xff0c;因为他修饰的是p&#xff1b;第一个…

容器技术——Cgroup

目录 容器技术容器技术概述要区分好共享与隔离的概念容器技术的三大核心容器对比虚拟机 namespaceUnionFs容器操作系统的来源操作系统的来源完整操作系统的镜像docker image是什么&#xff1f;如何构成的 如何为容器安装操作系统UnionFS&#xff08;联合文件系统&#xff09;的…

23.11.26日总结

图片与文字顶部对齐&#xff1a; <div class"addDishImgBox"><span class"addDishImgZi">商品图片&#xff1a;</span><img :src"myStorePhoto" class"addDishImg"> </div> .addDishImgBox{display: f…

【智能算法】基于黄金正弦和混沌映射思想的改进减法优化器算法

减法优化器&#xff08;Subtraction-Average-Based Optimizer&#xff0c;SABO&#xff09;是2023年刚出的智能优化算法。目前知网中文期刊基本搜不到&#xff0c;并且可以遇见未来一年文章也很少。SABO算法原理简单&#xff0c;算上初始化粒子&#xff0c;总共不超过6个公式。…

女生儿童房装修:原木上下铺搭配粉色调。福州中宅装饰,福州装修

你是否正在为女生儿童房的装修而发愁呢&#xff1f;该如何让房间既适合孩子生活&#xff0c;又能够满足日常学习的需要呢&#xff1f;这里有一个精美的装修案例&#xff0c;或许能够为你提供一些灵感。 1️⃣ 原木上下铺 房间的上下铺采用了原木色调&#xff0c;带来了自然、温…

网络爬虫(Python:Requests、Beautiful Soup笔记)

网络爬虫&#xff08;Python&#xff1a;Requests&#xff09; 网络协议简要介绍一。OSI参考模型二、TCP/IP参考模型对应关系TCP/IP各层实现的协议应用层传输层网络层 HTTP协议HTTP请求HTTP响应HTTP状态码 Requests&#xff08;Python&#xff09;Requests模块支持的http方法GE…

探索深度学习:从理论到实践的全面指南

探索深度学习&#xff1a;从理论到实践的全面指南 摘要&#xff1a; 本文旨在提供一个关于深度学习的全面指南&#xff0c;带领读者从理论基础到实践应用全方位了解这一技术。我们将介绍深度学习的历史、基本原理、常用算法和应用场景&#xff0c;并通过Python代码示例和Tens…

Python | CAP - 累积精度曲线分析案例

CAP通常被称为“累积精度曲线”&#xff0c;用于分类模型的性能评估。它有助于我们理解和总结分类模型的鲁棒性。为了直观地显示这一点&#xff0c;我们在图中绘制了三条不同的曲线&#xff1a; 一个随机的曲线&#xff08;random&#xff09;通过使用随机森林分类器获得的曲线…

docker基础学习笔记

文章目录 Docker简介Linux下安装DockerDocker常用命令Docker网络Docker存储docker-composedockerfile制作镜像私有仓库镜像导入导出参考 Docker简介 定义&#xff1a;Docker是一个开源的应用容器引擎优势&#xff1a; 一键部署&#xff0c;开箱即用&#xff1a;容器使用基于im…

openlayers+jsts 实现对行政区以外的区域进行遮罩(兼容多面的情况,兼容不同的ol版本)

先抛效果图,该区域有很多个小面 之前在网上搜到的方式实现 Openlayers 为目标范围以外的区域添加遮罩 - 知乎 核心代码如下&#xff0c;如果您不需要兼容全国的所有省市&#xff0c;而刚好要加地区又是连贯的区域的话&#xff0c;该方法可行&#xff0c;但是如果需要兼容全国…