原生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事件流:捕获->冒泡(默认)

执行顺序

具体的元素>层级高document(包括react16事件委托)

同层级的按注册顺序

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

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

阻止事件

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

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

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

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

原生事件:事件处理函数

React:nonp空函数

事件被分解后绑定在document

React17事件统一绑定container

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

(React17取消)事件池:创建/回收->数组弹出

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

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

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

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

Vue

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

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

用法


原生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属性中

(React17取消)事件池:创建/回收->数组弹出

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

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

但是对应的性能没有提高,所以就React17取消了事件池

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

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

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

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

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

Vue

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

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

用法

区别原生事件合成事件
命名纯小写onclick小驼峰onClick
参数字符串函数
阻止默认事件e.preventDefault()和return falsee.preventDefault()

事件源不同,阻止默认事件的方式不同,原生事件和合成事件的e.preventDefault()并非是同一个函数

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

合成事件 – React

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES的“或“查询

场景&#xff1a;需要查询ES中userId为""或者userId字段不存在的数据 dsl语句&#xff1a; {"from": 0,"size": 30,"query": {"bool": {"should": [{"term": {"userId": {"value"…

使用mock.js模拟数据

一、安装mock.js npm i mockjs 二、配置JSON文件 我们创建一个mock文件夹&#xff0c;用于存放mock相关的模拟数据和代码实现。 我们将数据全部放在xxx.json文件夹下&#xff0c;里面配置我们需要的JSON格式的数据。 注意&#xff1a;json文件中不要留有空格&#xff0c;否则…

Spring之AOP理解与应用(更新中)

1. AOP的认识 面向切面编程&#xff1a;基于OOP基础之上新的编程思想&#xff0c;OOP面向的主要对象是类&#xff0c;而AOP面向的主要对象是切面&#xff0c;在处理日志、安全管理、事务管理等方面有非常重要的作用。AOP是Spring中重要的核心点&#xff0c;AOP提供了非常强…

GDOUCTF2023-Reverse WP

文章目录 [GDOUCTF 2023]Check_Your_Luck[GDOUCTF 2023]Tea[GDOUCTF 2023]easy_pyc[GDOUCTF 2023]doublegame[GDOUCTF 2023]L&#xff01;s&#xff01;[GDOUCTF 2023]润&#xff01;附 [GDOUCTF 2023]Check_Your_Luck 根据 if 使用z3约束求解器。 EXP&#xff1a; from z3 i…

万字解析设计模式之迭代器模式、备忘录模式

一、迭代器模式 1.1概述 迭代器模式是一种行为型设计模式&#xff0c;它允许在没有暴露其底层表现形式的情况下遍历集合对象。迭代器模式提供一种通用的遍历机制&#xff0c;可以遍历任何类型的集合&#xff0c;包括数组、列表、树等。通过这种模式&#xff0c;可以实现一种通…

【华为OD】在第一人称射击游戏中,玩家通过键盘的 A 、 S 、 D 、 W 四个按键控制游戏人物分别向左、向后、向右、向前进行移动,从而完成走位

在第一人称射击游戏中,玩家通过键盘的 A 、 S 、 D 、 W 四个按键控制游戏人物分别向左、向后、向右、向前进行移动,从而完成走位。假设玩家每按动一次键盘,游戏人物会向某个方向移动一步,如果玩家在操作一定次数的键盘并且各个方向的步数相同时, 此时游戏人物必定会回到原…

宝塔面板的使用

记录一下&#xff1a; 后台是SpringBoot项目&#xff0c;前台是Vue项目&#xff0c;前后端分离&#xff0c;要用宝塔布署上腾讯云服务器。 后台&#xff1a;配置文件的数据写云端的。有关localhost的要改成云服务器的公网IP。执行package命令&#xff0c;双击。将打包出来的j…

大数据-之LibrA数据库系统告警处理(ALM-37013 MPPDBServer实例SOCKET异常)

告警解释 当操作系统的其它进程占用GTM实例监听端口号或双机端口号时&#xff0c;产生该告警。 告警属性 告警ID 告警级别 可自动清除 37013 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生告警的角色名称 HostName 产生告…

C 语言-循环嵌套-函数

C 语言 - 循环嵌套、函数 1. 循环嵌套 1.1 作用 循环 套 循环。 1.2 使用 需求1&#xff1a; 打印以下图形&#xff1a; * * * * * * * * * * * * * * * *代码&#xff1a; 1、使用循环打印 #include <stdio.h> int main(int argc, char const *argv[]) {for (int i…

云原生CI/CD流水线发布

文章目录 前言k8s组件与操作流程k8s组件创建pod k8s代码&&打包k8s yamldeploymentservicek8s volumesdemo CIgitlabCI runner CD配置git repository安装argo创建argo cd的配置yamlargocd和helm结合argocd hookargocd 发布 RBACoperatorhelmprometheus && grafn…

曝光!WPS用户信息或被盗用,紧急行动,迅软DSE数据加密应时而动!

WPS摊上大事了&#xff01;有用户发现&#xff0c;在WPS更新的一版用户隐私政策中&#xff0c;明确提到&#xff1a;“我们将对您主动上传的文档材料&#xff0c;在处理后作为AI训练的基础材料使用。”换句话说&#xff0c;WPS有可能“白嫖”用户的文档信息&#xff0c;用于投喂…

CVE-2020-11651(SaltStack认证绕过)漏洞复现

简介 SaltStack是使用Python开发的一个服务器基础架构集中化管理平台,底层采用动态的连接总线,使其可以用于编配,远程执行, 配置管理等等。 Salt非常容易设置和维护,而不用考虑项目的大小。从数量可观的本地网络系统,到跨数据中心的互联网部署,Salt设计为在任意数量的…

npm run build打包jquery项目

build.js 文件代码如下 const fs require(fs); const path require(path);// 指定要打包的HTML文件路径和输出目录路径 var pathName "./"; const outputDir dist;// 匹配html文件 var ipReg /\.(htm|html|js|version)$/i;// 创建输出目录&#xff08;如果不存…

顺序表总结

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 目录 &#x1f324;️arraylist的简…

JAVA多线程总结

一、概念&#xff1a; 1、什么是多任务 多任务就是在同一时间做多件事情&#xff0c;如边吃饭边玩手机等。看起来是多个任务都在做&#xff0c;本质上我们的大脑在同一时间依旧只做了一件件事情 2、什么是程序 程序是指令和数据的有序集合&#xff0c;其本身没有任…

洗地机应该怎么选?希亦、必胜、米博、添可、小米洗地机实测推荐

作为一个常年测评智能家居的博主&#xff0c;关于洗地机的测评使用这些年也积累了不少的体验感受。以至于常被周边的朋友问到&#xff0c;洗地机到底是不是真的好用&#xff1f;洗地机有什么优点吗&#xff1f;选购的时候应该怎么选呢&#xff1f;洗地机什么牌子比较好呢&#…

chatglm3 vllm部署推理;api访问使用

用fastchat部署暂时有各种问题,参考:https://github.com/lm-sys/FastChat/pull/2622 本篇用vllm运行测试可以使用 1、vllm运行 python -m vllm.entrypoints.api_server --model /***/chatglm/chatglm3-6b/

【C语言】深入理解数据类型转换与运算

文章目录 1.数据类型转换在分析源程序之前&#xff0c;我们需要了解几个基本概念&#xff1a;现在来分析源程序中的变量及其对应的十进制真值以及扩展操作方式&#xff1a; 1.1. short si -32768;1.2. unsigned short usi si;1.3. int i si;1.4. unsigned ui usi; 2&#x…

【开源】基于JAVA的农村物流配送系统

项目编号&#xff1a; S 024 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S024&#xff0c;文末获取源码。} 项目编号&#xff1a;S024&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统登录、注册界面2.2 系统功能2.2…

深度学习18

卷积层 查看每个数据 使用tensorboard查看 池化层 使用数据集进行训练 创建实例&#xff0c;使用tensorboard进行显示 最大池化保留了图片信息&#xff0c;神经网络训练的数据量大大减小&#xff0c;可以加快训练 非线性激活 非线性激活为神经网络加入了一些非线性的特质…