target和currentTarget的区别，以及currentTarget为null的问题

最新推荐文章于 2025-05-29 14:47:16 发布
原创 最新推荐文章于 2025-05-29 14:47:16 发布 · 930 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

本文详细解析了在事件处理中target和currentTarget属性的区别。target属性指向触发事件的元素，而currentTarget则指向当前正在处理事件的元素。通过实例说明，当事件冒泡时，这两个属性如何指向不同的元素。此外，还解释了为什么在浏览器控制台中currentTarget可能显示为null，但实际上它是存在的，并提供了使用currentTarget访问data属性的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. target和currentTarget区别

  1. target：点击的元素
  2. currentTarget：绑定事件的的元素

在这里插入图片描述
如图：

  1. 事件绑在外面的button上,currentTarget为button
  2. 当点击事件点在button上时，target也为button等于currentTarget
  3. 当点击事件点在里面的span上时，target为span，currentTarget还是为button，两者不同

2. currentTarget在浏览器打印出来的event中为null问题

在这里插入图片描述
解决方案：

直接使用就可以，在浏览器控制台看不到，但是实际是存在的,如：
e.currentTarget.dataset.id
小程序中e.target与e.currentTarget区别详解
Syleapn的博客
07-30 3万+
在小程序中，e.target与e.currentTarget是非常重要的，尤其是涉及到页面传值时！本节只说两者的区别，关于传值下一节再详细讲解>https://blog.youkuaiyun.com/Syleapn/article/details/81290133#comments~ 下面开始正文啦！！ 先来大概梳理下逻辑，以便引申与更一步了解target与curentTarget。 ...
event.currentTarget与event.target的区别介绍
12-12
event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which...
关于event对象中的currentTarget属性有时候为null这件事
https://github.com/blingbling-110
07-27 3076
关于event对象中的currentTarget属性有时候为null这件事前景提要问题复现解决方案拓展探究闲得蛋疼 前景提要 event.currentTarget MDN只说明了它表示事件的当前目标，总是指向事件绑定的元素。让我们来看下示例一： <!-- HTML --> <div id="outer"> <div id="inner"></div> </div> /* CSS */ #outer { width: 100px; h
精通JavaScript事件处理：event.target与currentTarget的区别
weixin_32287387的博客
05-29 860
在 JavaScript 中，属性在事件处理函数中扮演着重要的角色。当一个事件被触发时，它指向触发事件的最内层元素。无论事件监听器是绑定在哪个元素上，总是能准确地告诉我们事件从哪个具体的DOM元素开始的。事件模型中的允许开发者编写更加灵活的事件处理逻辑，尤其是当事件在DOM树中冒泡时。它与形成鲜明对比，后者引用了绑定事件监听器的元素。这一属性对于实现事件委托和处理动态添加或移除的元素上的事件至关重要。在JavaScript事件处理中，属性是指绑定事件监听器的元素。
currentTarget和 target的区别
lc237423551的博客
04-12 7097
最近面试被问到这个问题，还是感叹自己是个小白啊。 面试官问我target和currentTarget的区别。本文大多出自于一个掘金博主的文章点击打开链接target在事件流的冒泡阶段；currentTarget在事件流的捕获，冒泡阶段。只有当事件流处在冒泡阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象currentTarget指向当前事件活动的对象（...
target和currentTarget的区别
开发路上的AZhe
07-04 9555
event.target 和 event.currentTarget 都是对一个触发事件的对象的引用. 不同之处在于: event.target 对触发事件的对象的引用(即它标识事件发生的元素) event.currentTarget 当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素 target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段...
currentTarget和target的区别
空寻的博客
08-26 2536
currentTarget VS target target在事件流的目标阶段； currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候， target指向被单击的对象 currentTarget指向当前事件活动的对象（一般为父级）。 冒泡和捕获 当点击页面的一个元素的时候，事件会从这个元素的祖先元素逐层传递下来，这个过程成为事件捕获；当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡
javascript currentTarget对象介绍
10-30
在 IE 中，document.activeElement 将返回当前获得焦点的对象，而在 Firefox 和 Opera 中，e.currentTarget 将返回当前事件的目标元素。 在这个例子中，我们使用了 onclick 事件来触发 show 函数。由于 onclick ...
Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …} isTrusted : true bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : WebSocket {url: 'ws://http//3d1e7e46.r17.cpolar.top/admin/payment/status', readyState: 3, bufferedAmount: 0, onopen: null, onerror: ƒ, …} defaultPrevented : false eventPhase : 0 returnValue : true srcElement : WebSocket {url: 'ws://http//3d1e7e46.r17.cpolar.top/admin/payment/status', readyState: 3, bufferedAmount: 0, onopen: null, onerror: ƒ, …} target : WebSocket {url: 'ws://http//3d1e7e46.r17.cpolar.top/admin/payment/status', readyState: 3, bufferedAmount: 0, onopen: null, onerror: ƒ, …} timeStamp : 3033.5999999046326 type : "error" [[Prototype]] : Event
03-08
好的，我现在需要帮助用户解决在UniApp中遇到的WebSocket错误问题。用户提供的错误事件对象显示了一个类型为'error'的WebSocket事件，其中URL是'ws://http//3d1e7e46.r17.cpolar.top/admin/payment/status'，并且...
JS和JQ的event对象区别分析
10-25
因此，理解和区分`event.target`、`event.currentTarget`以及`event.delegateTarget`是非常重要的，特别是当你需要在复杂的DOM结构中进行事件处理时。 在实际应用中，理解JS和JQ中的Event对象差异，可以帮助开发者...
报错 log.vue:97 SSE connection error: MessageEvent {isTrusted: true, data: '{"error": "invalid input for query argument $1: 1 (expected str, got int)"}', origin: 'http://127.0.0.1:8888', lastEventId: '', source: null, …} isTrusted : true bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : EventSource {url: 'http://127.0.0.1:8888/sse/logs?type=1', withCredentials: false, readyState: 0, onopen: null, onmessage: ƒ, …} data : "{\"error\": \"invalid input for query argument $1: 1 (expected str, got int)\"}" defaultPrevented : false eventPhase : 0 lastEventId : "" origin : "http://127.0.0.1:8888" ports : [] returnValue : true source : null srcElement : EventSource {url: 'http://127.0.0.1:8888/sse/logs?type=1', withCredentials: false, readyState: 0, onopen: null, onmessage: ƒ, …} target : EventSource {url: 'http://127.0.0.1:8888/sse/logs?type=1', withCredentials: false, readyState: 0, onopen: null, onmessage: ƒ, …} timeStamp : 4918.800000190735 type : "error" userActivation : null [[Prototype]] : MessageEvent
最新发布
08-12
由于您要求必须输出相关问题，以下是根据上述错误和解决方案提出的问题： §§相关问题§§ 1. 如何正确处理数据库查询中的参数类型匹配问题？ 2. 在实时日志监控中，如何确保前端显示的时间与日志实际发生时间...
JS target与currentTarget区别说明
10-28
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
target和currentTarget区别
wuqiongqiong_的博客
01-11 3237
比较难区分的事件对象：target和currentTarget target:触发事件的某个具体对象。 currentTarget:绑定事件的对象，恒等于this（非ie的dom2级事件中，ie事件中this指向window），可能出现在事件流的任意一个阶段中 通常情况下terget和currentTarget是一致的，我们只要使用terget即可，（一般target用的也比较多）但有一种情
target与currentTarget的区别
高先生的猫
05-26 973
这两天去面试的两个小伙伴都遇到了一个问题，面试官问到你用jQuery的时候有没有用过target和currentTarget？他们的区别是什么？他们都是一脸懵，平时练习也没有用过currentTarget啊？其实currentTarget这个属性很是鸡肋，其实我们平时也用不到，下面我们通过两个例子说明平时我们为什么用不到： 举个例子： <ul> <li>按钮1</li> <li>按钮2</li> <li&g
为什么控制台打印事件对象e时里面的currentTarget为null，而打印e.currentTarget时为DOM对象？
qq_39852145的博客
06-17 2653
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
小程序学习篇：target和currentTarget区别
gede_s的博客
10-12 721
微信小程序 target和currentTarget区别
为什么log事件对象的时候currentTarget是null？
weixin_33747129的博客
08-18 520
This is an artifact of the way the Javascript console works when you log an object. The log doesn't contain a copy of all the object properties, it just contains a refere...
事件源e之控制台输出的e.currentTarget为空的原因
Hello World
08-02 1514
事件源e之获取currentTarget 可能会存在一个问题： // 用鼠标移动举例 document.onmousemove=function(e){ console.log(e.currentTarget) // 控制台输出为null } 原因：currentTarget为null原因 tips:点击蓝色字可以跳转到StackOverflow链接 通过console.log()去输出会存在问题。尽管如此，在打代码时还是可以直接e.currentTarget获取当前事件处理函数绑定的对象。 .
target和currentTarget
weixin_30408739的博客
05-27 96
target是事件的调用对象(event dispatcher)，currentTarget是事件的处理对象(event processor) 1.target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值