Vue中的事件委托(事件代理)使用方法介绍

事件委托(事件代理)

将原本需要绑定在子元素上的事件监听器委托在父元素上,让父元素充当事件监听的职务。

事件委托是一种利用事件冒泡的特性,在父节点上响应事件,而不是在子节点上响应事件的技术。它能够改善性能,因为只需要在父元素上设置一次事件监听器,就可以管理同一类型的所有子元素的事件。

事件委托利用了事件冒泡的原理,即事件从最深的节点开始,逐步向上传播。在事件冒泡过程中,父元素会捕获到子元素的事件,并进行分析。通过查看event对象的属性,可以确定是哪个子元素的事件,从而执行相应的处理逻辑。

使用事件委托能够避免对每个子元素单独设置事件监听器,降低了与DOM交互的次数,提高了页面的整体运行性能。同时,事件委托也具有更高的灵活性和可维护性,不需要操作大量的DOM元素。

在Vue中,可以利用v-on指令或@符号来绑定事件监听器,并在父元素上设置事件委托。例如,可以在父元素上设置一个click事件监听器,然后在子元素上绑定一个click事件,通过事件委托实现父元素对子元素事件的响应。

优点:

节省内存(dom与js的关联),减少事件的注册
增加子元素也无需再注册事件

缺点:

获取绑定的节点数据会相对麻烦一点

在日常开发中,很经常我们会遇到个问题,就是在长列表数据较多的时候,而又需要对子元素注册一些事件(如onClick),就会造成比较大的内存开支,很耗费性能,也可能会造成页面卡顿等等;
所以可以通过在父元素上添加@click监听,而不是在子元素上注册事件;
如果数据量比较少,就可忽略不计;

html代码:

<div id="app"><div id="event-agent" @click="eventAgent"><p v-for="(item, index) in list" :key="index" :data-name="item.name" :data-index="index">{{item.name}}</p></div>
</div>

获取节点参数 (data-index、data-name),则在 $event.target.dataset { index: 'xxx', name: 'xxx' } 中取值

 js代码

data() {return { list: [{ id: 1, name: 'kmj1'},{ id: 2, name: 'kmj2'},{ id: 3, name: 'kmj3'},{ id: 4, name: 'kmj4'}]   }
},
methods: { // 事件委托eventAgent(e) {const target = e.target; console.log(target )// 注意 e.target.nodeName 的元素名是大写的if (target  && target.nodeName === "P") {const dataset = target .dataset;console.log('$event.target.dataset : ' dataset ); // $event.target.dataset :  { name: 'xxx', index: 'xxx' }}}
}

原生的写法其实也差不多:

document.getElementById( "event-agent").onclick = function(event){ // 兼容Ie的写法event = event || window.event;var  target = event.target || event.srcElement;  // 注意 e.target.nodeName 的元素名是大写的if (target  && target.nodeName === "P") {const dataset = target .dataset;console.log('$event.target.dataset : ' dataset ); // $event.target.dataset :  { name: 'xxx', index: 'xxx' }}
}; // 也可以用这种方式,其实都差不多的:
// 冒泡阶段处理程序  
document.getElementById( "event-agent").addEventListener( "click", (e) => {},   false);
// 捕获阶段处理程序
document.getElementById( "event-agent").addEventListener( "click", (e) => {},   true);

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

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

相关文章

如何理解JDK、JRE、JVM区别与联系

摘要&#xff1a;JDK是 Java 语言的软件开发工具包(SDK)。在JDK的安装目录下有一个jre目录&#xff0c;里面有两个文件夹bin和lib&#xff0c;在这里可以认为bin里的就是jvm&#xff0c;lib中则是jvm工作所需要的类库&#xff0c;而jvm和 lib合起来就称为jre。 一、JDK JDK(Ja…

【【迭代16次的CORDIC算法-verilog实现】】

迭代16次的CORDIC算法-verilog实现 -32位迭代16次verilog代码实现 CORDIC.v module cordic32#(parameter DATA_WIDTH 8d32 , // we set data widthparameter PIPELINE 5d16 // Optimize waveform)(input …

第十四章Java博客

lambda就是数学中的“λ”的读音&#xff0c;lambda表达式是基于λ演算而得名的&#xff0c;因为lambda抽象&#xff08;lambda abstraction&#xff09;表示一个匿名的函数&#xff0c;于是开发语言也将lambda表达式用来表示匿名函数&#xff0c;也就是没有函数名字的函数。C#…

maven管理工具使用package打包的时候无法将lib文件夹下的第三方jar包打入,上线打jar包后运行异常问题

问题描述&#xff1a; 调用第三方接口的时候通过手动引入了第三方的两个jar包到我本项目的lib文件夹下&#xff0c;并在pom文件添加入下配置&#xff1a; <dependency><groupId>cn.xxxx.xxxx.core</groupId><artifactId>xxxx-core</artifactId>…

Spring Boot 中实现跨域的几种方式

前言 在现代Web应用中&#xff0c;由于安全性和隐私的考虑&#xff0c;浏览器限制了从一个域向另一个域发起的跨域HTTP请求。解决这个问题的一种常见方式是实现跨域资源共享&#xff08;CORS&#xff09;。Spring Boot提供了多种方式来处理跨域请求&#xff0c;本文将介绍其中的…

C语言字符串处理提取时间(ffmpeg返回的时间字符串)

【1】需求 需求&#xff1a;有一个 “00:01:33.90” 这样格式的时间字符串&#xff0c;需要将这个字符串的时间值提取打印出来&#xff08;提取时、分、秒、毫秒&#xff09;。 这个时间字符串从哪里来的&#xff1f; 是ffmpeg返回的时间&#xff0c;也就是视频的总时间。 下…

vs快捷键

ctrlMo 折叠代码块 ctrlML 打开代码块

电子电器架构(E/E)演化 —— 主流主机厂域集中架构概述

电子电器架构(E/E)演化 —— 主流主机厂域集中架构概述 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。…

系列七(实战)、发送 接收单向消息(Java操作RocketMQ)

一、发送 & 接收单向消息 1.1、概述 发送单向消息&#xff0c;适用于发送方不关心或者不在意消息的发送结果&#xff0c;这种方式的吞吐量很大&#xff0c;但是存在消息丢失的风险&#xff0c;对于重要消息要慎用&#xff01;该种方式通常适用于对消息没有那么严格的场景中…

类和对象的创建和实例化

1. 类的概述 1.1 具体示例 类是描述一类事物的特征和行为的统称&#xff0c;抽象的不存在的&#xff0c;泛指的概念&#xff0c;例如&#xff1a;描述一个人&#xff0c;从外观上&#xff08;特征&#xff09;和言行举止&#xff08;行为&#xff09;上进行描述外观上&#xff…

c 语言学习:输出阶乘的算式

c 语言学习&#xff1a;输出阶乘的算式 代码 #include "stdio.h"int fact(int num){if (num < 1){printf("1 ");return 1;} else {printf("%d x ",num);return num * fact(num-1);} }int main(){int num 10; // printf("plz inpu…

【华为OD题库-107】编码能力提升计划-java

题目 为了提升软件编码能力&#xff0c;小王制定了刷题计划&#xff0c;他选了题库中的n道题&#xff0c;编号从0到n-1&#xff0c;并计划在m天内按照题目编号顺序刷完所有的题目(注意&#xff0c;小王不能用多天完成同一题) 在小王刷题计划中&#xff0c;小王需要用time[i]的时…

老鹰目标检测数据集VOC格式60张

老鹰是天空中的王者&#xff0c;它们拥有极佳的飞行能力。它们能以惊人的速度在天空中翱翔&#xff0c;尤其擅长高空俯冲捕食。老鹰的视力非常敏锐&#xff0c;能够准确地发现地面上的猎物&#xff0c;并迅速下落抓取。它们的爪子强而有力&#xff0c;足以击倒比自己体型庞大的…

云计算与大数据之间的羁绊(期末不挂科版):云计算 | 大数据 | Hadoop | HDFS | MapReduce | Hive | Spark

文章目录 前言&#xff1a;一、云计算1.1 云计算的基本思想1.2 云计算概述——什么是云计算&#xff1f;1.3 云计算的基本特征1.4 云计算的部署模式1.5 云服务1.6 云计算的关键技术——虚拟化技术1.6.1 虚拟化的好处1.6.2 虚拟化技术的应用——12306使用阿里云避免了高峰期的崩…

NAT路由器,将内网ip转换为外网ip

Network Address Translation&#xff0c;网络地址翻译。 概念 NAT就是在局域网内部使用内部地址&#xff0c;而当内部节点要与外部网络通信时&#xff0c;在网关将内部地址替换为公用地址&#xff0c;从而在外部网关正常使用。 NAT表是转换的核心 NAT路由器有NAT表&#xf…

0基础学习VR全景平台篇第131篇:曝光三要素—光圈

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 我们经常从电视或书刊上看到这样的照片&#xff0c;照片的主体清晰&#xff0c;前后镜朦胧虚化&#xff0c;整体看起来非常的漂亮。那这样的照片是如何拍出来的呢&#xff1f;他和…

为什么要出现并发?并发的三要素

大家好&#xff0c;我是"java继父"伯约&#xff0c;假如这篇对大家有帮助的话求一个赞&#xff0c;另外文章末尾放了我从小白到架构师多年的学习资料。 1.为什么需要多线程 众所周知&#xff0c;CPU、内存、I/O 设备的速度是有极大差异的&#xff0c;为了合理利用 C…

Vue编写登录注册页面前端校验

登录注册校验 template页面 <div class"app-login"><!--登录 --><div class"form"><el-form ref"form" size"large" autocomplete"off" v-if"isLogin" :model"registerData" :r…

FXCM福汇官网:深入解析BOLL指标的喇叭口形态及含义

BOLL指标是一种通过布林线&#xff08;Bollinger Bands&#xff09;的上轨线、中轨线和下轨线的相互关系来判断市场趋势和波动性的技术分析工具。BOLL指标的喇叭口形态包括开口型、收口型和紧口型&#xff0c;它们各自具有独特的含义。 《FXCM福汇官网开户》 1. 开口型喇叭口…

cesium实现二三维联动

记录项目中实现二三维地图联动 效果如下&#xff1a; 第一步&#xff1a;现在页面中加载二三维地图&#xff08;地图的初始化已省略&#xff09; <template><div><div><button click"show">二三维联动</button></div><div&…