js-14---什么是事件代理?应用场景是什么?

1、事件代理是什么?
事件代理,通俗来讲就是把一个元素响应事件(click,keydown…)的函数委托到另一个元素。
事件流都会经过三个阶段:捕获阶段–>目标阶段----->冒泡阶段
事件委托就是在冒泡阶段完成,
事件委托是会把一个或者一组元素的事件委托到它的父层或者更外层的元素上,真正绑定事件的是外层元素,而不是目标元素。
当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。
举例:
一个宿舍的同学的快递同时到了,一种笨方法就是让他们一个个去取。
较优的方法是把这件事委托给宿舍长,让一个人出去拿好所有的快递,然后再根据收件人一一分发给同学。
在这个例子中,取快递就是一个事件,每个同学指的是需要响应事件的DOM元素,而出去统一领取快递的宿舍长就是代理的元素。
所以真正绑定事件的是这个元素,按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

2、应用场景
如果有一个列表,列表中有大量的列表项,需要在点击列表项的时候响应一个事件。
在这里插入图片描述
如果给每个列表项都一一绑定一个函数,那对于内存消耗是非常大的。
在这里插入图片描述
这时候就可以事件委托,把点击事件绑定在父级元素ul上,然后执行事件的时候再去匹配目标元素
在这里插入图片描述
还有一种场景是上述列表项并不多,我们给每个列表都绑定了事件
但是如果用户能够随时动态的增加或者去除列表项的元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件。
如果用了事件委托就没有这种麻烦,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配。

举例:
在下面html结构中,点击input可以动态添加元素。
在这里插入图片描述
使用事件委托
在这里插入图片描述
可以看到,使用事件委托,在动态绑定事件的情况下可以减少很多重复工作的。

3、总结
适合事件委托的事件有:click、mousedown、mouseup、keydown、keyup、keypress
从上面应用场景中可以看出使用事件委托存在两个优点:
减少整个页面所需的内存,提高整体性能。
动态绑定,减少重复工作量

使用事件委托也存在局限性:
focus、blur这些时间没有冒泡机制,所以无法进行委托绑定事件
mousemove、mouseout这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的

如果把所有事件都用事件代理,可能出现事件误判,即本不该触发的事件绑定了事件。

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

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

相关文章

以CS32F031为例浅说国产32位MCU的内核处理器

芯片内核又称CPU内核,它是CPU中间的核心芯片,是CPU最重要的组成部分。由单晶硅制成,CPU所有的计算、接受/存储命令、处理数据都由核心执行。各种CPU核心都具有固定的逻辑结构,一级缓存、二级缓存、执行单元、指令级单元和总线接口…

Linux 调试技术 Kprobe

目录 用途:一、技术背景1.1 kprobes的特点与使用限制1.2 kprobe原理 二、 基于kprobe探测模块的探测方式2.1、struct kprobe结构体2.2 kprobe API函数2.3 示例代码参考资料: 用途: 判断内核函数是否被调用,获取调用上下文、入参以…

三秋农忙,自动驾驶农机保驾护航

“三秋”(收获、播种、整地)是一年中重要而忙碌的农事季节,水稻、棉花、玉米等农作物收获时期,也是小麦、蔬菜等秋种的好时间,还是各类农作物进入秋管的重要期。 随者农业科技发展,北斗导航农机自动驾驶系…

英语语法基础--思维导图

思维导图通常用于可视化和整理信息,而英文语法非常广泛且复杂,无法在一个简单的思维导图中完整表示。然而,我可以提供一个简化版本的英文语法思维导图,列出一些主要的语法概念和部分示例。 请注意,这只是一个基本的概…

【牛客刷题】反转固定区间链表、每k个节点一组反转

链表内指定区间反转_牛客题霸_牛客网 ListNode* reverseList(ListNode* head, ListNode* tail) {ListNode* pre nullptr;ListNode* cur head;while (cur ! tail) { 最后cur就是tailListNode* temp cur->next;cur->next pre;pre cur;cur temp;}return pre;}ListNode…

Debian12系统下LAMP环境中Nubuilder4.5的安装

一、环境搭建 按照官方的说法,Apache2和Nginx都可以的,实际上,你最好直接按照 Mariadb\Apache2\Php8.2 这个顺序,搭建LAMP环境较好。不然各种调试,还不一定能够成功。 相关搭建方法,属于一般操作&#xf…

金融信创,软件规划需关注自主安全及生态建设

软件信创化,就是信息技术软件应用创新发展的意思(简称为“信创”)。 相信在中国,企业对于“信创化”这个概念并不陌生。「国强则民强」,今年来中国经济的快速发展,受到了各大欧美强国的“卡脖子”操作的影…

UDP协议结构及其注意事项

UDP报文结构 UDP报文结构主要是由两个部分组成的:UDP头部和数据部分。 UDP头部 源端口号:16位字段,指示数据发送方的端口号。目的端口号:16位字段,指示数据接收方端口号。UDP报文长度:16位字段&#xff0…

Java HashSet

HashSet 基于 HashMap 来实现的,是一个不允许有重复元素的集合。 HashSet 允许有 null 值。 HashSet 是无序的,即不会记录插入的顺序。 HashSet 不是线程安全的, 如果多个线程尝试同时修改 HashSet,则最终结果是不确定的。 您必…

【项目】Reactor模式的服务器

目录 Reactor完整代码连接 前置知识: 1.普通的epoll读写有什么问题? 2.Connection内的回调函数是什么 3.服务器的初始化(Connection只是使用的一个结构体) 4.等待就绪事件:有事件就绪,对使用Connectio…

配置keil生成asm汇编文件

简介:ASM是汇编语言源程序的扩展名;程序在编译的过程中,会将源代码编译会汇编代码,一步步生成可执行文件; 1:keil中options的配置 这个语法应该是根据工程工程哪里的配置名称来的,也可以使用固…

伦敦银线性回归分析

在金融市场中,商品的价格一段时间内总是会围绕着一条线性回归趋势线,在两侧波动并沿着这条趋势线方向发展。当价格在波动过程中偏离趋势线距离太大了,就会再次向趋势线靠拢。 波浪理论认为商品的价格走势都是波浪式发展的,无论处于…

vue中实现签名画板

特意封装成了一个组件&#xff0c;签名之后会生成一张图片 signBoard.vue <template><el-drawer title"签名" :visible.sync"isShowBoard" append-to-body :show-close"false" :before-close"closeBoard" size"50%&quo…

【Unity每日一记】WheelColider组件汽车游戏的关键

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

.netcore对传输类设置区分大小

.Net Core中内置了对Json的转化与解析 可将PropertyNameCaseInsensitive false 设置为区分大小写。

vue-别名路径联想提示的配置

在根路径下&#xff0c;新建 jsconfig.json 文件&#xff0c;即可 在输入 自动联想到src目录。 代码如下&#xff1a; // 别名路径联想提示&#xff1a;输入自动联想 {"compilerOptions":{"baseUrl":"./","paths": {"/*":[…

Vue2项目练手——通用后台管理项目第二节

Vue2项目练手——通用后台管理项目 路由限制重复跳转CommonAside.vue 顶部header组件搭建与样式修改右边用户菜单栏使用的组件图片CommonHeader.vue Vuex实现左侧折叠文件目录store/index.jsstore/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue 路由限制重复跳转 路由…

如何提高抖音直播间的人气(从15个方面为你解答)

抖音直播是一项非常受欢迎的内容创作方式&#xff0c;但是在直播过程中若是没有足够的人气&#xff0c;会让主播感到非常沮丧。如何才能提高抖音直播间的人气呢&#xff1f;本文将从15个方面为你一一解答。 一、打造独特个性的直播形象 在抖音直播中&#xff0c;每一个主播都有…

vue-elementPlus自动按需导入和主题定制

elementPlus自动按需导入 装包 -> 配置 1. 装包&#xff08;主包和两个插件包&#xff09; $ npm install element-plus --save npm install -D unplugin-vue-components unplugin-auto-import 2. 配置 在vite.config.js文件中配置&#xff0c;配置完重启&#xff08;n…

Vue3+Element Plus实现el-table跨行显示(非脚手架)

Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-method"objectSpanMethod"自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试&#xff0c;完整代码如下效果图 app组件内容 <div id"app"><!-- 远程搜索 --><e…