在 VueJS 中使用事件委托处理点击事件(事件委托,vue事件委托,什么是事件委托,什么是vue的事件委托)

前言

在开发 Vue 项目时,我们经常需要处理大量的点击事件。为每个可点击的元素单独添加事件监听器不仅会增加代码的复杂度,还会降低性能。事件委托是一种有效的优化方式,它可以显著减少事件监听器的数量,提高代码的可维护性和执行效率。我们通过一个实际示例,详细讲解如何在 Vue 项目中使用事件委托。简单记录一下


一. 事件委托定义

VueJS中的事件委托是一种优化事件处理和提升性能的技术,它允许你在一个父元素上监听事件,而不是在每个子元素上单独绑定事件处理器。这种做法基于JavaScript 的事件冒泡机制,即在DOM树中,事件会从最深层的节点开始向上冒泡,直到到达document根节点。


二. HTML 内容结构

1. 首先,看下 HTML 部分:

    <div class="homeView_box"><div class="iconInside_box" @click="choseIconInside"><img src="@/assets/sxzy/1.png" class="cmCt img1" data-action="moveUp" /><imgsrc="@/assets/sxzy/2.png"class="cmCt img2"data-action="moveDown"/><imgsrc="@/assets/icons/home3.png"class="cmCt img3"data-action="mainView"@click="choseHomeIcon"/><imgsrc="@/assets/sxzy/3.png"class="cmCt img4"data-action="moveLeft"/><imgsrc="@/assets/sxzy/4.png"class="cmCt img5"data-action="moveRight"/></div></div>

2. 以上部分代码,我们写了一个父级 div 容器 .iconInside_box,其中包含5个 img 元素,每个 img 元素代表一个可点击的图标。其中:

  1. @click=“choseIconInside”,在父级容器上绑定点击事件监听器。
  2. data-action,每个 img 元素都有一个data-action 属性,用于标识点击时要执行的动作。


三. 事件逻辑函数

1. 事件触发时,事件委托的处理函数;这里我们有一个包含多个图标的 div 容器,每个HTML元素图标,有不同的点击操作,请看以下:

    choseIconInside(e) {const action = e.target.getAttribute("data-action");if (action) {switch (action) {case "moveUp":console.log("向上移动");// 实现向上移动的逻辑this.viewer.camera.moveUp(10);break;case "moveDown":console.log("向下移动");// 实现向下移动的逻辑this.viewer.camera.moveDown(10);break;case "moveLeft":console.log("向左移动");// 实现向左移动的逻辑this.viewer.camera.moveLeft(10);break;case "moveRight":console.log("向右移动");// 实现向右移动的逻辑this.viewer.camera.moveRight(10);break;case "mainView":console.log("主视角图");let _this = this;this.viewer.camera.flyTo({destination: this.Cesium.Cartesian3.fromDegrees(118.879624,32.036791,10),orientation: {// 设置相机的默认方向(heading),此处为朝向东南方向heading: this.Cesium.Math.toRadians(238),// 设置相机的俯仰角(pitch),此处为略微向下看pitch: this.Cesium.Math.toRadians(-15),// 设置相机的滚转角(roll),此处为不滚转roll: 0.0,},duration: 2,complete: function () {_this.viewer.camera.zoomOut(200); // 在飞行动画完成后缩小场景},});break;default:console.log("未知动作");}}},},

2. 以上代码我们展示了一个事件处理器函数 choseIconInside,它用于响应用户在界面中对某些图标或按钮的点击操作。该函数主要实现了以下功能:

1. 读取data-action属性:

  • 当事件触发时,函数通过事件对象 e.target 获取被点击元素上的 data-action 属性值。这个属性是用来区分不同图标或按钮的功能的。


2. 根据data-action执行不同操作:

  • 使用 switch 语句根据 data-action 的值执行相应的逻辑。
  • "moveUp" 和 "moveDown":控制相机沿垂直轴向上或向下移动。
  • "moveLeft" 和 "moveRight":控制相机沿水平轴向左或向右移动。
  • "mainView":将相机飞往预设的位置,并设置相机的方向和角度,最后在动画完成后再执行缩放操作。


3. Cesium相关操作:

  • this.viewer.camera 是用来控制3D场景中相机行为的对象。
  • moveUp, moveDown, moveLeft, 和 moveRight 方法用于即时地改变相机位置。
  • flyTo 方法则用于创建一个平滑的相机飞行动画到指定的地理坐标,同时可以设定飞行结束后的回调函数。


4. 错误处理:

  • 如果 data-action 的值不是预期的任何一种情况,代码将输出一条“未知动作”的日志信息。

3. choseIconInside 函数是一个用于处理用户交互的事件处理器,它根据被点击元素的 data-action 属性值执行特定的相机控制操作,从而实现对3D场景的导航和视角调整。这种设计模式使得代码更加模块化和可维护,同时也提高了用户界面的响应性和交互性。

4. 这里的switch语句是一种选择结构,它允许程序基于不同的条件来执行不同的代码块。switch语句通常用来替代多个if...else if...else语句,当有大量条件需要检查时,使用switch可以使代码更清晰、更简洁。


四. 事件委托的优势

  1. 减少事件监听器数量:通过在父元素上绑定事件监听器,避免了在每个子元素上分别绑定监听器,减少了内存消耗和提高了性能。

  2. 动态添加元素:如果页面中需要动态添加新的子元素,事件委托可以确保新元素也能自动获得事件处理能力,而无需重新绑定事件。

  3. 简化代码:使用事件委托可以使你的代码更加简洁和易于维护,尤其是当有大量相似类型的元素需要处理相同类型的事件时。


五. 注意事项

  1. 事件目标判断:在事件处理函数中,你需要确保检查e.target(事件的目标元素)是否是你想要处理的元素。这是因为事件冒泡也可能触发父元素上绑定的事件,即使点击的是父元素内部的其他非目标元素。

  2. 事件阻止:有时你可能需要阻止事件的进一步传播,例如使用e.stopPropagation()。这样可以防止事件冒泡到更高级别的元素,避免触发不必要的事件处理。

  3. e.stopPropagation() 是一个在JavaScript中用于阻止事件冒泡的方法。当你在DOM树中的某个元素上触发一个事件(比如点击事件),这个事件会首先在目标元素上触发,然后沿着DOM树向上冒泡,依次触发其祖先元素上的事件监听器。如果你不希望事件继续向上冒泡并触发更多的事件处理器,可以调用 e.stopPropagation()

  4. 调用 stopPropagation() 方法后,事件将不会继续在其祖先元素上调用任何事件处理器。这在处理复杂的DOM结构时非常有用,可以防止意外触发不需要的事件处理器,从而避免潜在的性能问题或逻辑错误。

  5. 性能考量:虽然事件委托可以提高性能,但过多的事件监听器仍然可能影响性能。合理规划事件监听器的布局和层级可以进一步优化应用的响应速度。


六. 本章小结

事件委托是一种高效且优雅的事件处理方式,尤其适用于处理大量相似子元素的事件。在Vue.js项目中运用事件委托,可以极大地提升代码的可读性和性能表现。

创作不易,感觉有用,就一键三连,感谢(●'◡'●)

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

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

相关文章

用Python+selenium实现一个自动化测试脚本

一,安装Python. python官方下载地址&#xff1a;Download Python | Python.org 安装后点击开始菜单,在菜单最上面能找到IDLE. IDLE是python自带的shell, 点击打开, 即可开始编写python脚本了. 二,安装selenium 上面python已安装完成,接下来安装selenium. 安装selenium之前需要…

P1105 平台

平台 题目描述 空间中有一些平台。给出每个平台的位置&#xff0c;请你计算从每一个平台的边缘落下之后会落到哪一个平台上。 注意&#xff0c;如果某两个平台的某个两边缘横坐标相同&#xff0c;物体从上面那个平台落下之后将不会落在下面那个平台上&#xff08;即平台的范…

网络工具(Netcat、iPerf)

目录 1. Netcat2. iPerf 1. Netcat Netcat 是一款简单的 Unix 工具&#xff0c;常用于测试 UDP 和 TCP 连接。 https://www.cnblogs.com/yywf/p/18154209 https://eternallybored.org/misc/netcat/ https://nmap.org/download.html 创建UDP监听端 nc -u -l localPort 创建UDP…

业务开发之用户管理(七)

云风网 云风笔记 云风知识库 首先从逻辑上&#xff0c;用户管理只限制admin用户显示 一、路由限制用户管理的访问权限 config/routes.ts添加access&#xff1a;admin权限限制 {name: userManage,icon: table,access: canAdmin,path: /userManage,component: ./userManage,}二…

Flink 实时数仓(四)【DWD 层搭建(二)流量域事实表】

前言 昨天刚搬到新校区&#xff0c;新校区小的可怜&#xff0c;好在之后出去实习交通可以方便点&#xff1b;待在学院太受限了&#xff0c;早点离开&#xff01; 今天开始完成 DWD 层剩余的需求&#xff0c;上一节我们把日志数据根据不同类型分流写入到了不同的主题&#xff1b…

云端医疗解决方案:互联网医院系统的云计算架构与实现

随着云计算技术的成熟和普及&#xff0c;医疗行业开始探索云端解决方案&#xff0c;以应对数据存储、计算能力和系统扩展性等方面的挑战。互联网医院系统作为医疗信息化的重要组成部分&#xff0c;通过云计算架构实现了高效、灵活和可扩展的医疗服务。本文将深入探讨互联网医院…

2024 AI开发者大赛火热进行中!

“iFLYTEK AI 开发者大赛”是由科大讯飞发起&#xff0c;中国信息协会联合主办的人工智能竞赛平台&#xff0c;汇聚产学研各界力量&#xff0c;面向全球开发者发起数据算法及创新应用类挑战&#xff0c;推动人工智能前沿科学研究和创新成果转化&#xff0c;培育人工智能产业人才…

YOLOv10改进 | 主干篇 | YOLOv10引入CVPR2023 顶会论文BiFormer用于主干修改

1. 使用之前用于注意力的BiFormer在这里用于主干修改。 YOLOv10改进 | 注意力篇 | YOLOv10引入BiFormer注意力机制 2. 核心代码 from collections import OrderedDict from functools import partial from typing import Optional, Union import torch import torch.nn as n…

如何评估并选择最佳的国内项目管理软件?

国内外主流的10款国内项目管理软件对比&#xff1a;PingCode、Worktile、Jira 、Basecamp、Trello、Asana 、Wrike、Tower 、禅道、Teambition 。 在选择适合自己企业的项目管理软件时&#xff0c;很多人会感到无从下手&#xff0c;担心无法找到既符合预算又能满足团队需求的解…

上网防泄密,这些雷区不要碰!九招教你如何防泄密

李明&#xff1a;“最近看到不少关于信息泄露的新闻&#xff0c;真是让人担忧。咱们在工作中&#xff0c;稍有不慎就可能触碰到泄密的雷区啊。” 王芳&#xff1a;“确实&#xff0c;网络安全无小事。尤其是我们这种经常需要处理敏感信息的岗位&#xff0c;更得小心谨慎。那你…

一行代码教你使用Python制作炫酷二维码

二维码&#xff0c;我们日常生活中随处可见的编码方式&#xff0c;凭借其方便快捷的信息承载能力&#xff0c;已经渗透到各行各业。 MyQR 的介绍 MyQR 是一个 Python 库&#xff0c;用于生成自定义二维码&#xff0c;包括带有 Logo、彩色和动态的二维码。它基于 Python 的 qr…

书生大模型实战营第三期——入门岛——Git基础知识

第三关&#xff1a;Git基础知识 任务如下&#xff1a; 任务描述 破冰活动&#xff1a;自我介绍 每位参与者提交一份自我介绍。 提交地址&#xff1a;GitHub - InternLM/Tutorial: LLM&VLM Tutorial 的 camp3 分支&#xff5e;实践项目&#xff1a;构建个人项目 创建一个个人…

电脑硬盘坏了数据可以恢复吗?如何恢复硬盘数据?

电脑硬盘坏了数据可以恢复吗&#xff1f;对于这种问题&#xff0c;还需要具体问题具体分析的&#xff0c;一般是可以恢复。 硬盘损坏可以分为物理损坏和逻辑损坏两种情况&#xff1a; 1.逻辑损坏 这通常是由于软件问题&#xff0c;如文件系统错误、病毒攻击、误删除、格式化等…

未发先火,Smartbi AIChat频频“出圈”

近日&#xff0c;思迈特正式官宣&#xff0c;将于8月8日线上新品发布会上推出自研的全新AI应用——Smartbi AIChat&#xff0c;这款应用在还未正式推向市场前&#xff0c;已获得媒体、分析机构等多方关注&#xff0c;热度飙升&#xff0c;思迈特软件及其新品再一次成为业界内外…

社交媒体分享预览图片和内容修改

在facebook发帖分享链接时&#xff0c;设置预览图片和内容 设置预览图片和内容 <head> <meta name"description" content"我是内容" /> </head> <body><img src"./1.jpg" alt"SEO Image" style"dis…

VSCode在windows系统下使用conda虚拟环境配置

如何解决CondaError: Run ‘conda init‘ before ‘conda activate‘_condaerror: run conda init before conda activat-CSDN博客 首先检查自己的anaconda是否是添加到整个的环境变量里了 打开cmd如果conda和python都能够识别那么就是配置成功了 然后看插件是否安装&#xf…

SQL注入实例(sqli-labs/less-9)

0、初始页面 1、爆库名 使用python脚本 def inject_database1(url):name for i in range(1, 20):low 32high 128mid (low high) // 2while low < high:payload "1 and if(ascii(substr(database(),%d,1)) > %d ,sleep(2),0)-- " % (i, mid)res {"…

Linux进程概念

目录 一.冯诺依曼体系 为什么程序运行会加载到内存 二.进程概念 1.进程控制块PCB 2.进程标识符 使用ps命令 使用pgrep命令 使用系统调用 3.进程状态 孤儿进程 守护进程(精灵进程) 4.进程优先级 三.环境变量 一.冯诺依曼体系 数据在设备之间的传输实质是数据的来回拷…

【Qt】项目代码

main.cpp文件 argc&#xff1a;命令行参数个数。*argv[ ]&#xff1a;每一个命令行参数的内容。main的形参就是命令行参数。QApplication a(argc, argv) 编写一个Qt的图形化界面程序&#xff0c;一定需要QApplication对象。 widget w; 在创建项目的时候&#xff0c;勾选widg…

mysql源码编译启动debug

对于没有C语言基础的同学来说&#xff0c;想看看源码&#xff0c;在搞定编辑器做debug的时候就被劝退了&#xff0c;发生点啥了&#xff0c;完全看不懂&#xff0c;不知道从哪里入手去做debug&#xff1b;我为了看看 mysql 的 insert buffer 到底存的是索引页还是数据页&#x…