当前位置: 首页 > news >正文

currentTarget指向监听者Target:指向触发者

在JavaScript的事件处理中,currentTarget 和 target 是两个重要的属性,它们常常用于区分事件处理函数当前绑定的元素和实际触发事件的元素。这两个属性的意义可以用下面的方式解释:

currentTarget

  • 指向监听者:这意味着currentTarget指向的是当前正在处理该事件的元素,也就是事件监听器被添加到的那个元素。换句话说,它是事件监听器所绑定的DOM元素。

target

  • 指向触发者target属性指向的是实际触发该事件的元素。这通常是最深层的、用户与之交互的元素,也就是事件冒泡或捕获过程中的最初触发者。

举个例子来说明:

 

html复制代码

<div id="outer" style="width: 200px; height: 200px; background-color: lightblue;">
Outer Div
<div id="inner" style="width: 100px; height: 100px; background-color: lightgreen;">
Inner Div
<button id="button">Click Me</button>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function(event) {
console.log('currentTarget:', event.currentTarget.id); // 输出 "currentTarget: outer"
console.log('target:', event.target.id); // 输出可能是 "target: button" 如果点击了按钮
});
</script>

在这个例子中,如果你点击了内部的button元素,事件会冒泡到outer div,因为我们在outer div上添加了事件监听器。在这种情况下:

  • event.currentTarget 将指向outer div(因为监听器是添加在这个元素上的)。
  • event.target 将指向被点击的button元素(因为它是实际触发事件的元素)。

但是,如果你点击的是outer div但不是buttoninner div,那么event.targetevent.currentTarget将指向同一个元素(即outer div)。

相关文章:

currentTarget指向监听者Target:指向触发者

在JavaScript的事件处理中&#xff0c;currentTarget 和 target 是两个重要的属性&#xff0c;它们常常用于区分事件处理函数当前绑定的元素和实际触发事件的元素。这两个属性的意义可以用下面的方式解释&#xff1a; currentTarget 指向监听者&#xff1a;这意味着currentTa…...

OpenAI宫斗剧番外篇: “Ilya与Altman联手对抗微软大帝,扫除黑恶势力”,“余华”和“莫言”犀利点评

事情是这样的。 小编我是一个重度的智谱清言用户&#xff0c;最近智谱清言悄悄上线了一个“划词引用”功能后&#xff0c;我仿佛打开了新世界的大门。我甚至用这个小功能&#xff0c;玩出来了即将为你上映的《OpenAI宫斗剧番外篇》。 3.5研究测试&#xff1a;hujiaoai.cn 4研…...

网关路由SpringCloudGateway、nacos配置管理(热更新、动态路由)

文章目录 前言一、网关路由二、SpringCloudGateway1. 路由过滤2. 网关登录校验2.1 鉴权2.2 网关过滤器2.3 登录校验2.3.1 JWT2.3.2 登录校验过滤器 3. 微服务从网关获取用户4. 微服务之间用户信息传递 三、nacos配置管理问题引入3.1 配置共享3.1.1 在Nacos中添加共享配置3.1.2 …...

关于linux的防护,以及群集你要知道的有哪些11-搭建Zabbix监控系统

1、zabbix具备功能 主机的性能监控、网络设备性能监控、数据库性能监控、多种警告方式、详细报表图表绘制 2、zabbix的监测对象 Linux服务器、Windows服务器、路由器、交换机等网络设备 3、zabbix的监控架构 server-client架构&#xff1a;适用于网络比较简单&#xff0c…...

腾讯云环境安装单机版minio

Minio 下载安装 wget https://dl.min.io/server/minio/release/linux-amd64/minio修改minio 文件为可执行文件 chmod x minio3、启动&#xff0c;随机端口启动 ./minio server /data/miniodata # 或者指定密码执行 MINIO_ACCESS_KEYmyminioadmin MINIO_SECRET_KEYmyminioadm…...

蓝桥杯2023(十四届)省赛——统计日期(八重神子)

统计日期 2.日期统计 - 蓝桥云课 (lanqiao.cn) 其实一开始我想直接暴力的&#xff0c;然后写着写着突然觉得可以优化一下&#xff1a; 优化方法&#xff1a;先找所有2023的位置&#xff0c;记录初始和最后的位置 找出所有合法日期的位置&#xff0c;使用前缀和&#xff0c;计…...

【Redis基础知识一】

Redis基础知识One Redis简介为什么用 Redis 作为 MySQL 的缓存&#xff1f;1.Redis 具备高性能2.Redis具备高并发 Redis包含的数据结构Redis里面数据结构的应用场景Redis里面数据结构的实现 Redis线程模型补充什么是跳表跳表特性 Redis采用单线程为什么还这么快 Redis简介 Redi…...

如何在go项目中实现发送邮箱验证码、邮箱+验证码登录

前期准备 GoLand &#xff1a;2024.1.1 下载官网&#xff1a;https://www.jetbrains.com/zh-cn/go/download/other.html Postman&#xff1a; 下载官网&#xff1a;https://www.postman.com/downloads/ 效果图(使用Postman) Google&#xff1a; QQ&#xff1a; And …...

Docker 部署 Nginx 实现一个极简的 负载均衡

背景: Nginx是异步框架的网页服务器&#xff0c;其常用作反向代理(负载均衡器)。在一般的小项目中, 服务器不多, 如果不考虑使用服务注册与发现, 使用Nginx 可以容易实现负载均衡。 在特此写一个快速入门 Nginx 的技术贴, 使用 Docker 部署 Nginx, 实现一个极简的加权轮询负载均…...

Java刷题总结(面试)

1、String类 String不可变 java 中String是 immutable的&#xff0c;也就是不可变&#xff0c;一旦初始化&#xff0c;其引用指向的内容是不可变的。 也就是说&#xff0c;String str “aa”&#xff1b;str“bb”&#xff1b;第二句不是改变“aa”所存储地址的内容&#xf…...

ipad air6电容笔推荐,2024十大高性价比电容笔排行榜!

​电容笔作为ipad的最佳拍档&#xff0c;为学生党和打工人带来了极大的便利&#xff0c;二者搭配效率真的大大提升&#xff0c;但是&#xff0c;如何选购一支适合自己的电容笔呢&#xff1f;作为一个对数码设备非常感兴趣并且有一定了解的人&#xff0c;我根据自己多年的使用经…...

Java Memorandum

Java Memorandum 1 定义安全的集合2 collection集合用迭代器删除元素时避免并发修改异常3 异常捕获4 RequestBody和RequestParam和Parameter区别4.1 RequestBody4.2 RequestParam4.3 Parameter 1 定义安全的集合 void old() {ArrayList<Apple> apples new ArrayList<…...

大数据学习之 Hadoop部署

Hadoop部署 Linux桌面模式关闭 # 设置 systemctl set-default multi-user.target # 重启 reboot防火墙关闭 systemctl status firewalld systemctl stop firewalld # 关闭开机自启 systemctl disable firewalld配置Java环境 echo $JAVA_HOME java -version # Java配置 # 上传ja…...

xxe漏洞--xml外部实体注入漏洞

1.xxe漏洞介绍 XXE&#xff08;XML External Entity Injection&#xff09;是一种攻击技术&#xff0c;它允许攻击者注入恶意的外部实体到XML文档中。如果应用程序处理XML输入时未正确配置&#xff0c;攻击者可以利用这个漏洞访问受影响系统上的敏感文件、执行远程代码、探测内…...

Nginx反向代理与负载均衡:让网站像海豚一样灵活

引言&#xff1a;"当网站遇上海豚&#xff1a;Nginx让数据流动更流畅&#xff01;"想象一下&#xff0c;你的网站是一片繁忙的海域&#xff0c;而Nginx就像一群聪明的海豚&#xff0c;它们不仅能够迅速地找到最佳的捕食路线&#xff08;反向代理&#xff09;&#xf…...

企业应考虑的优秀云安全措施

作为云客户&#xff0c;企业有责任确保正确使用他们提供的工具来保证数据和应用程序的安全。让德迅云安全来跟大家一起研究一些典型企业应该考虑的优秀云安全措施。 在数据安全和隐私方面&#xff0c;企业是否在努力跟上疫情的发展?企业不是一个人。就像多年以前&#xff0c;C…...

如何将老板的游戏机接入阿里云自建K8S跑大模型(下)- 安装nvidia/gpu-operator支持GPU在容器中共享

文章目录 安装nvidia/gpu-operator支持GPU在容器中共享 安装nvidia/gpu-operator支持GPU在容器中共享 安装 nvidia/gpu-operator遇到两个问题&#xff1a; 由于我们都懂的某个原因&#xff0c;导致某些镜像一直现在不成功。 解决办法&#xff0c;准备一个&#x1fa9c;&#…...

代码随想录-Day16

104. 二叉树的最大深度 方法一&#xff1a;深度优先搜索 class Solution {public int maxDepth(TreeNode root) {if (root null) {return 0;} else {int leftHeight maxDepth(root.left);int rightHeight maxDepth(root.right);return Math.max(leftHeight, rightHeight) …...

31.@Anonymous

1►@Anonymous原理 大家应该已经习惯我的教学套路,很多时候都是先使用,然后讲述原理。 上节课我们使用了注解@Anonymous,然后接口就可以直接被访问到了,不用token!不用token!不用token!。 我们一般知道,注解是给程序看的,给机器看的,当然也是给程序员看的。注解如果…...

oracle 表同一列只取最新一条数据写法

select * from (select t.*,row_number() over(partition by 去重列名 order by 排序列名 desc) as rnfrom 表名)where rn1 1.row_number() over(....): 为每条数据分配一个行号,1.2.3....这样的 2.partition by : 以某列作为分组&#xff0c;每个分组行号从1开始&#xf…...

ESP32-S2物联网实战:IPv6配置与Adafruit IO双向通信

1. 项目概述与核心价值如果你手头有一块ESP32-S2开发板&#xff0c;并且已经厌倦了仅仅让它连上Wi-Fi、点个灯&#xff0c;想让它真正“活”起来&#xff0c;成为一个能融入现代互联网、能与云端自由对话的智能节点&#xff0c;那么这篇文章就是为你准备的。我们将深入两个在物…...

网盘下载新革命:九大平台一键直链,告别客户端束缚

网盘下载新革命&#xff1a;九大平台一键直链&#xff0c;告别客户端束缚 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘…...

STM32CubeMX外设配置实战——以F103C8T6的CAN与DMA为例

1. STM32CubeMX与F103C8T6开发基础 STM32CubeMX是ST官方推出的图形化配置工具&#xff0c;它能极大简化STM32系列MCU的外设初始化流程。对于刚接触STM32开发的工程师来说&#xff0c;这个工具就像"乐高积木说明书"——通过可视化操作就能完成80%的底层配置工作。我最…...

SAP KO88结算时,如何用BADI_FINS_ACDOC_POSTING_EVENTS把成本中心塞进自定义字段?

SAP KO88结算实战&#xff1a;通过BADI_FINS_ACDOC_POSTING_EVENTS实现成本中心到自定义字段的精准映射 在SAP工单结算&#xff08;KO88&#xff09;的复杂业务场景中&#xff0c;财务凭证的标准化字段往往无法满足企业多维度的分析需求。特别是当需要将特定成本中心信息映射到…...

多模态AI实战:基于OpenGVLab/Ask-Anything构建视觉问答系统

1. 项目概述&#xff1a;当视觉大模型学会“看图说话”最近在折腾多模态AI应用&#xff0c;发现了一个挺有意思的开源项目&#xff0c;叫OpenGVLab/Ask-Anything。简单来说&#xff0c;它就像一个给AI装上了“眼睛”和“嘴巴”的系统&#xff0c;你给它一张图片或一段视频&…...

openpilot自动驾驶系统深度解析:架构剖析与实战指南

openpilot自动驾驶系统深度解析&#xff1a;架构剖析与实战指南 【免费下载链接】openpilot openpilot is an operating system for robotics. Currently, it upgrades the driver assistance system on 300 supported cars. 项目地址: https://gitcode.com/GitHub_Trending/…...

终极显卡调校指南:如何用NVIDIA Profile Inspector释放游戏性能

终极显卡调校指南&#xff1a;如何用NVIDIA Profile Inspector释放游戏性能 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA Profile Inspector是一款专为NVIDIA显卡用户设计的免费优化工具&…...

为AI编程助手构建安全防线:Cursor自定义规则实战指南

1. 项目概述&#xff1a;为AI编程助手装上“安全护栏” 如果你和我一样&#xff0c;深度使用Cursor这类AI编程助手&#xff0c;那你一定体验过它带来的效率革命。它能帮你生成代码、重构函数、甚至解释复杂的逻辑&#xff0c;就像一个不知疲倦的编程伙伴。但硬币总有另一面——…...

开源技能图谱工具SkillPort:Go语言构建的知识管理利器

1. 项目概述&#xff1a;一个技能图谱与知识管理的开源利器 最近在整理个人技术栈和团队知识库时&#xff0c;我一直在寻找一个能直观展示技能关联、又能深度管理学习路径的工具。市面上的笔记软件要么太“平”&#xff0c;只能线性记录&#xff1b;要么太“重”&#xff0c;像…...

别再让某个用户占满硬盘了!手把手教你用Linux quota给CentOS 7/8的/home目录设置磁盘限额

别再让某个用户占满硬盘了&#xff01;手把手教你用Linux quota给CentOS 7/8的/home目录设置磁盘限额 想象一下这样的场景&#xff1a;你管理的服务器上&#xff0c;十几个开发人员共享着同一个存储空间。某天突然收到警报——磁盘空间不足&#xff01;调查后发现&#xff0c;一…...