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

news2024/12/24 9:53:08

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

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

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

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

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

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

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

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

相关文章

Fiddler安装与使用教程(2) —— 软测大玩家

😏作者简介:博主是一位测试管理者,同时也是一名对外企业兼职讲师。 📡主页地址:【Austin_zhai】 🙆目的与景愿:旨在于能帮助更多的测试行业人员提升软硬技能,分享行业相关最新信息。…

AI新时代,新华三存储新思考

在数字经济蓬勃发展下,数据正在重塑社会运行模式,推动百行百业的创新发展,成为经济发展的关键驱动力。如今数据成为企业的重要资产,企业希望通过数据了解市场和客户的需求来快速决策,这不仅需要数据高效流转&#xff0…

Python爬取电影信息:Ajax介绍、爬取案例实战 + MongoDB存储

Ajax介绍 Ajax(Asynchronous JavaScript and XML)是一种用于在Web应用程序中实现异步通信的技术。它允许在不刷新整个网页的情况下,通过在后台与服务器进行数据交换,实时更新网页的一部分。Ajax的主要特点包括: 异步通…

【解决】mysqladmin flush-hosts

问题 mysql出现 mysqladmin flush-hosts,是因为其他客户机连接错误次数过多时,mysql会禁止客户机连接。 解决方法 1、进入服务器数据库,打开数据库命令行界面输入 flush hosts; 此时便可连接 2、可以.修改mysql配置文件,在[…

SpringBoot项目--电脑商城【上传头像】

一、易错点 1.错误写法: 把文件存到数据库中,需要图片时访问数据库,数据库将文件解析为字节流返回,最后写到本地的某一个文件.这种方法太耗费资源和时间了 2.正确写法: 将对应的文件保存在操作系统上,然后再把这个文件路径记录下来,因为在记录路径的…

重生奇迹通关恶魔广场攻略篇

初次进入重生奇迹MU的血色城堡,你可能会对里面不断刷新出来的怪物产生一种密集恐惧症,但是请相信一点,那就是恶魔广场里面的怪物更多,而且品种还不重复,由低至高,轮番刷新,一波又一波……在我看…

Linux部署kettle并设置定时任务

一.安装Kettle linux中使用kettle时首先需要jdk环境,这里就不概述linux中jdk的安装与配置了。 1.首先将kettle压缩包放入linux并解压 unzip data-integration.zip kettle安装路径为:/root/Kettle9.3/data-integration 设置权限 chmod -R 755 /root/Kettle9.3/d…

Allegro画原理图时不能用的非法字符,你知道吗?

Cadence Allegro是一款电子设计自动化工具,常用于原理图绘制和电路设计,在使用Allegro画原理图时,电子工程师可能为了确保文件的准确性和稳定性,能够顺利进行后续的PCB设计和制造,需要注意这些非法字符,那么…

提高 Web 开发效率的10个VS Code扩展插件,你知道吗?

前言 一个出色的开发工具可以显著提高开发人员的开发效率,而优秀的扩展插件则能更进一步地提升工具的效率。在前端开发领域,VSCode毫无疑问是目前最受欢迎的开发工具。为了帮助前端开发人员提高工作效率,今天小编将向大家推荐10个强大的VSCo…

TSINGSEE青犀视频AI智能算法平台电动车入梯检测解决方案

一、方案背景 随着大众的出行要求逐渐提升,交通拥堵现象也随处可见,电动车出行,就成了大家的首选。随着电动车数量的激增,众多用户为了个人方便,大多在室内停放或充电,有的甚至停放在走道、楼梯间等公共区…

无涯教程-JavaScript - BITOR函数

描述 BITOR函数返回两个数字的按位"或"。 语法 BITOR (number1, number2)争论 Argument描述Required/OptionalNumber1Must be in decimal form and greater than or equal to 0.RequiredNumber2Must be in decimal form and greater than or equal to 0.Required…

基于Java+SpringBoot+Vue前后端分离青年公寓服务平台设计和实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

vue基础知识七:SPA首屏加载速度慢的怎么解决?

一、什么是首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说…

指针跃动(济南)客户运营服务中心上线了!

指针跃动(济南)客户运营服务中心上线了! ——打通客户运营服务全链路—— 随着全国代驾业务需求的不断增长,“指针跃动”宣布:指针跃动(济南)客户运营服务中心上线了! 以新的思维方式…

CMT:卷积与Transformers的高效结合

论文提出了一种基于卷积和VIT的混合网络,利用Transformers捕获远程依赖关系,利用cnn提取局部信息。构建了一系列模型cmt,它在准确性和效率方面有更好的权衡。 CMT:体系结构 CMT块由一个局部感知单元(LPU)、一个轻量级多头自注意模块(LMHSA)和…

end value has mixed support, consider using flex-end instead

这是因为 应该用flex-end,不应该用end 所以将所有的都改好之后,就不会再报这个错了

python3 修改nacos的yaml配置

一、安装nacos库 pip install nacos-sdk-python 二、代码如下 import nacos import yaml# 连接地址 NACOS_SERVER_ADDRESSES "192.168.xx.xx" NACOS_SERVER_PORT 替换为你的端口号,如8848# 命名空间 NACOS_NAMESPACE "your_namespace"# 账…

【网络层】网络基础 -- IP协议

引入IP协议头格式网段划分特殊的IP地址IP地址的数量限制 私有IP地址和公网IP地址分片与组装如何分片与组装? 引入 我们前面学习了传输层的相关知识,难道真的就是直接传送吗?当然不是,那TCP究竟做了什么?IP又扮演什么角…

RFID溯源驱动汽车座椅制造的智能时代

在今天的快速发展的制造业中,信息化和智能化已经成为不可或缺的部分。信息化和智能化能够极大地提高生产效率、减少浪费,降低成本,提升产品的质量。汽车座椅产线信息化和智能化是汽车座椅产线升级的重要方向,RFID技术方案在汽车座…

有了这个技术,再也不为水浸事件发愁啦!

在现代社会中,电力是我们生活和工作的不可或缺的一部分。电力供应的可靠性对于维持社会的正常运转至关重要。而变电站则是电力系统中的关键环节,它们起着将高压电转换为适用于分配的低压电的重要作用。然而,变电站也存在各种风险,…