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)。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

windows docker desktop 更换镜像存储目录

windows docker desktop 更换镜像存储目录 方法&#xff1a;如图&#xff0c;Browse浏览一个新的目录并选中&#xff0c;确定后&#xff0c;程序会开始stop&#xff0c;在stop完成前&#xff0c;会持续迁移原有镜像到新的位置&#xff0c;你会发现目标位置的磁盘占用空间越来越…

内网穿透--Ngrok-入门-上线

免责声明:本文仅做技术交流与学习... 目录 Ngrok: 技术实现: 前提: 命令: 详细流程及图解: 平台Ngrok: Sunny-Ngrok内网转发内网穿透 - 国内内网映射服务器 支持的协议&#xff1a;tcp、http、https 支持的类型&#xff1a;正向代理、反向代理 --隧道开通免费的 --协议…

论文降重攻略!复盘降重至5.7%,aigc降到0%的经验!

论文降重攻略&#xff01;复盘降重至5.7%,aigc降到0%的经验&#xff01; 首先要提一个敲好用的论文降重软件-蝌蚪论文&#xff0c;当知网查重46%的时候有没有和我一样头都要炸的感觉&#xff0c;最关键的是自己改了几天还是没降下去。 索性删了好多标红的&#xff0c;但查重率…

别说废话!说话说到点上,项目高效沟通的底层逻辑揭秘

假设你下周要在领导和同事面前汇报项目进度&#xff0c;你会怎么做&#xff1f;很多人可能会去网上搜一个项目介绍模板&#xff0c;然后按照模板来填充内容。最后&#xff0c;汇报幻灯片做了 80 页&#xff0c;自己觉得非常充实&#xff0c;但是却被领导痛批了一顿。 这样的境…

四天学会JS高阶(学好vue的关键)——深入面向对象(理论+实战)(第三天)

***本章面试使用居多* 理论篇**一、编程思想 1.1 面向过程 JS 前端居多 按照步骤 性能高 适合跟硬件关系很紧密 没有面向对象易维护易复用易扩展 1.2 面向对象 java典型 按照功能&#xff0c;把事务分别成一个个对象&#xff0c;对象之间分工合作 比较灵活 适合多人合作的…

Java基础(三)- 多线程、网络通信、单元测试、反射、注解、动态代理

多线程基础 线程&#xff1a;一个程序内部的一条执行流程&#xff0c;只有一条执行流程就是单线程 java.lang.Thread代表线程 主线程退出&#xff0c;子线程存在&#xff0c;进程不会退出 可以使用jconsole查看 创建线程 有多个方法可以创建线程 继承Thread类 优点&#x…

MPLS VPN

不是公司的产品&#xff0c;是运营商对外提供的一种服务 没咋懂&#xff0c;oh my god

物体检测算法-R-CNN,SSD,YOLO

物体检测算法-R-CNN&#xff0c;SSD&#xff0c;YOLO 1 R-CNN2 SSD3 Yolo总结 1 R-CNN R-CNN&#xff08;Region-based Convolutional Neural Network&#xff09;是一种基于区域的卷积神经网络&#xff0c;是第一个成功将深度学习应用到目标检测上的算法。它主要由三个步骤组…

CSS学习笔记之中级教程(三)

14、CSS 下拉菜单 14.1 示例1&#xff1a;普通弹窗 思路&#xff1a;弹窗内容先隐藏display: none;&#xff0c;:hover时候修改弹窗部分的 display: block; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><me…

ROS2学习——节点话题通信(2)

目录 一、ROS2节点 1.概念 2.实例 &#xff08;1&#xff09;ros2 run &#xff08;2&#xff09;ros2 node list &#xff08;3&#xff09;remapping重映射 &#xff08;4&#xff09;ros2 node info 二、话题 &#xff08;1&#xff09; ros2 topic list &#xf…

Vue学习穿梭框Transfer组件

Vue学习Transfer组件 一、前言1、案例一2、案例二 一、前言 在 Vue 3 中使用 el-transfer 组件可以帮助你实现数据的穿梭功能&#xff0c;让用户可以将数据从一个列表转移到另一个列表。下面是一个简单示例&#xff0c;演示如何在 Vue 3 中使用 el-transfer 组件&#xff1a; …

ROS | 实现SLAM的功能

用launch文件启动Hector_Mapping的建图功能 1.引入launch文件 2.args是引入的设置好的rviz文件 Hector_Mapping建图的参数设置

【云原生】Kubernetes 核心概念

什么是 Kubernetes Kubernetes&#xff0c;从官方网站上可以看到&#xff0c;它是一个工业级的容器编排平台。Kubernetes 这个单词是希腊语&#xff0c;它的中文翻译是“舵手”或者“飞行员”。在一些常见的资料中也会看到“ks”这个词&#xff0c;也就是“k8s”&#xff0c;它…

迎接AI大模型时代:为什么JS-Tool-Big-Box是前端开发者的最佳选择

随着AI大模型的快速发展&#xff0c;前端开发面临着前所未有的机遇和挑战。数据量和复杂度的增加&#xff0c;以及用户对卓越体验的需求&#xff0c;使得前端工具的选择变得尤为重要。在这样的背景下&#xff0c;JS-Tool-Big-Box脱颖而出&#xff0c;成为前端开发者的首选。本文…

QTextCodec NO such file or directory让qt6兼容qt5

首先在.pro 文件中新加 QT core5compat这时会报错 链接 报错之后修复qt&#xff0c;新加兼容模块&#xff0c;见链接。

基于树的存储数据结构demo

一.简介 由于之前博主尝试Java重构redis&#xff0c;在redis中的的字典数据结构底层也是采用数组实现&#xff0c;字典中存在两个hash表&#xff0c;一个是用于存储数据&#xff0c;另一个被用于rehash扩容为前者两倍。但是我注意到了在redis的数据结构中&#xff0c;并没有像…

分类和品牌关联

文章目录 1.数据库表设计1.多表关联设计2.创建表 2.使用renren-generator生成CRUD1.基本配置检查1.generator.properties2.application.yml 2.生成代码1.进入localhost:81生成代码2.将main目录覆盖sunliving-commodity模块的main目录 3.代码检查1.注释掉CategoryBrandRelationC…

2024-5-23 石群电路-14

2024-5-23&#xff0c;星期四&#xff0c;22:20&#xff0c;天气&#xff1a;晴&#xff0c;心情&#xff1a;晴。今天没有什么重要的事情发生&#xff0c;心情一如既往的平静&#xff0c;距离返校假期还有两天~~~。 今天观看了石群老师电路基础课程的第23/24个视频&#xff0…

金丝雀发布(灰度发布)介绍 及 声明式管理方法简介

目录 一 应用发布策略 1&#xff0c;滚动发布&#xff08;k8s默认&#xff09; 2&#xff0c;蓝绿发布 3&#xff0c;金丝雀发布 二 金丝雀发布&#xff08;Canary Release&#xff09; &#xff08;灰度发布&#xff09; 1&#xff0c;金丝雀发布图解 2&#xff0…

前端:音频可视化(H5+js版本)

一、效果展示 HTML5JS实现一个简单的音频可视化 二、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>音频可视化</title><style></style></head><body><divs…