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.mzph.cn/bicheng/13661.shtml

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

相关文章

Spring: OncePerRequestFilter

文章目录 一、介绍二、使用 一、介绍 OncePerRequestFilter是Spring Boot中的一个过滤器抽象类&#xff0c;它在Spring Security中也得到了广泛的应用。这个过滤器抽象类的主要目的是确保在每次外部请求时只执行一次过滤操作&#xff0c;对于服务器内部之间的forward等请求&am…

关于如何创建一个可配置的 SpringBoot Web 项目的全局异常处理

前情概要 这个问题其实困扰了我一周时间&#xff0c;一周都在 Google 上旅游&#xff0c;我要如何动态的设置 RestControllerAdvice 里面的 basePackages 以及 baseClasses 的值呢&#xff1f;经过一周的时间寻求无果之后打算决定放弃的我终于找到了一些关键的线索。 当然在此…

Python中的json.dump与json.dumps对比

Python中的json.dump与json.dumps对比 json.dumps()json.dump() json.dumps() dumps 是 “dump string” 的缩写。它将Python对象转换&#xff08;序列化&#xff09;为JSON格式的字符串。数据被转换为一个字符串&#xff0c;并且这个字符串可以直接被写入文件、发送到网络&am…

为什么我用save保存更新,数据库不更新,反而新增一条

今天发现一个奇怪的问题&#xff1a; 为什么我用save保存更新的数据后&#xff0c;数据库不更新&#xff0c;但是增加了一条空数据&#xff0c;我的前台也把数据用json传上去了&#xff0c;也成功了&#xff0c;但是数据库没有更新相应行的数据&#xff0c;而是新增了一条数据&…

SpringBoot前置知识02-spring注解发展史

springboot前置知识01-spring注解发展史 spring1.x spring配置只能通过xml配置文件的方式注入bean,需要根据业务分配配置文件&#xff0c;通过import标签关联。 spring1.2版本出现Transactional注解 <?xml version"1.0" encoding"UTF-8"?> <be…

实现顺序表各种基本运算的算法

实验一&#xff1a;实现顺序表各种基本运算的算法 一、实验目的与要求 目的: 领会顺序表存储结构和掌握顺序表中各种基本运算算法设计。 内容: 编写一个程序sqlist.cpp,实现顺序表的各种基本运算和整体建表算法(假设顺序表的元素类型ElemType为char),并在此基础上设计一个…

计组期末必考大题

一.寻址方式详解 1.直接寻址 指令地址码直接给到操作数所在的存储单元地址 2.间接寻址 A为操作数EA的地址 3.寄存寻址 4.寄存器间接寻址 5.变址寻址 6.基地址寻址 7.小结 二、指令周期详解 一、基本概念 指令周期:去除指令并执行指令所需要的时间指令周期:由若干个CPU周…

如何实现响应式设计

响应式设计&#xff08;Responsive Web Design, RWD&#xff09;是一种设计思路和技术实现方法&#xff0c;它使网站或应用程序能够适配不同大小屏幕和设备。以下是实现响应式设计的详细步骤&#xff1a; 确定设计目标&#xff1a; 首先&#xff0c;你需要明确你的设计目标&am…

C++/ cuda kernel中的模版元编程识别 kernel 模版的数据类型

1&#xff0c;模版元编程 模板元编程是一种利用 C 模板系统在编译时进行计算和生成代码的技术。其原理基于模板特化、递归、模板参数推导等特性&#xff0c;通过模板实例化和展开&#xff0c;在编译时生成代码&#xff0c;以实现在编译期间进行复杂计算和代码生成的目的。 2&am…

开发人员容易被骗的原因有很多,涉及技术、安全意识、社会工程学以及工作环境等方面。以下是一些常见原因:

技术方面&#xff1a; 漏洞和补丁管理不当&#xff1a;未及时更新软件和依赖库可能存在已知漏洞&#xff0c;容易被攻击者利用。缺乏安全编码实践&#xff1a;没有遵循安全编码规范&#xff0c;容易引入SQL注入、跨站脚本&#xff08;XSS&#xff09;等安全漏洞。错误配置&…

None和doctoring的秘密

None和doctoring的秘密 用None和docstring来描述默认值会变的参数 有时&#xff0c;我们想把那种不能够提前固定的值&#xff0c;当作关键字参数的默认值。例如&#xff0c;记录日志消息时&#xff0c;默认的时间应该是出发事件的那一刻。所以&#xff0c;如果调用者没有明确…

前端笔记-day07

学成在线网站 文章目录 效果图代码展示index.htmlindex.cssbase.css 效果图 代码展示 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…

vue-router 完整的导航流程解析

1、导航被触发 2、在失活的组件里调用 beforeRouteLeave 守卫 组件内守卫beforeRouteLeave&#xff1a;在离开该组件之前&#xff0c;会先调用它&#xff08;用于在离开组件前保存或清理一些状态&#xff09; import { onBeforeRouteLeave } from vue-routeronBeforeRouteLea…

键盘盲打是练出来的

键盘盲打是练出来的&#xff0c;那该如何练习呢&#xff1f;很简单&#xff0c;看着屏幕提示跟着练。屏幕上哪里有提示呢&#xff1f;请看我的截屏&#xff1a; 截屏下方有8个带字母的方块按钮&#xff0c;这个就是提示&#xff0c;也就是我们常说的8个基准键位&#xff0c;我…

spring boot多模块项目中父项目与子项目的连接

如题&#xff0c;spring boot多模块项目中&#xff0c;父项目在本级的pom.xml中&#xff0c;引入子项目&#xff0c;类似代码如下&#xff1a; ruoyi-modules/pom.xml&#xff1a; <modules><module>ruoyi-system</module><module>ruoyi-gen</modu…

【linux】详解vim编辑器

基本指令 【linux】详解linux基本指令-CSDN博客 【linux】详解linux基本指令-CSDN博客 vim的基本概念 vim有很多模式&#xff0c;小编只介绍三种就能让大家玩转vim了&#xff0c; 分别是&#xff1a; 正常/普通/命令模式 插入模式 末行/底行模式 命令模式 控制屏幕光标的…

【C++初阶】--- C++入门(上)

目录 一、C的背景及简要介绍1.1 什么是C1.2 C发展史1.3 C的重要性 二、C关键字三、命名空间2.1 命名空间定义2.2 命名空间使用 四、C输入 & 输出 一、C的背景及简要介绍 1.1 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&…

探索Linux中的神奇工具:探秘tail命令的妙用

探索Linux中的神奇工具&#xff1a;探秘tail命令的妙用 在Linux系统中&#xff0c;tail命令是一个强大的工具&#xff0c;用于查看文件的末尾内容。本文将详细介绍tail命令的基本用法和一些实用技巧&#xff0c;帮助读者更好地理解和运用这个命令。 了解tail命令 tail命令用…

Excel 下划线转驼峰

Excel 下划线转驼峰 LOWER(LEFT(SUBSTITUTE(PROER(A1),"_",""),1))&RIGHT(SUBSTITUTE(PROPER(A1),"_",""),LEN(SUBSTITUTE(PROPER(A1),"_",""))-1)

微博:一季度运营利润9.11亿元,经营效率持续提升

5月23日&#xff0c;微博发布2024年第一季度财报。一季度微博总营收3.955亿美元&#xff0c;约合28.44亿元人民币&#xff0c;超华尔街预期。其中&#xff0c;广告营收达到3.39亿美元&#xff0c;约合24.39亿元人民币。一季度调整后运营利润达到1.258亿美元&#xff0c;约合9.1…