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

最新推荐文章于 2022-10-12 17:01:45 发布

weixin_42291794

最新推荐文章于 2022-10-12 17:01:45 发布

阅读量874

点赞数

分类专栏： js原理文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42291794/article/details/107006285

版权

js原理专栏收录该内容

28 篇文章 2 订阅

订阅专栏

1. target和currentTarget区别

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

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

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

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

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

直接使用就可以，在浏览器控制台看不到，但是实际是存在的,如：
e.currentTarget.dataset.id

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42291794

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

2687

关于event对象中的currentTarget属性有时候为null这件事前景提要问题复现解决方案拓展探究闲得蛋疼前景提要 event.currentTarget MDN只说明了它表示事件的当前目标，总是指向事件绑定的元素。让我们来看下示例一：  <div id="outer"> <div id="inner"></div> </div> /* CSS */ #outer { width: 100px; h

参与评论您还未登录，请先登录后发表或查看评论

target和currentTarget的区别

开发路上的AZhe

07-04

9383

event.target 和 event.currentTarget 都是对一个触发事件的对象的引用. 不同之处在于: event.target 对触发事件的对象的引用(即它标识事件发生的元素) event.currentTarget 当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素 target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段...

currentTarget和target的区别

空寻的博客

08-26

2417

currentTarget VS target target在事件流的目标阶段； currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候， target指向被单击的对象 currentTarget指向当前事件活动的对象（一般为父级）。冒泡和捕获当点击页面的一个元素的时候，事件会从这个元素的祖先元素逐层传递下来，这个过程成为事件捕获；当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡

【开发备忘录】event.currentTarget 异步为null

还有很长很长的路

09-30

663

文章目录背景问题解决深层原因测试代码：Event 简单示例背景 el-table实现行单击和行双击事件，但是发现每次行双击都会触发2次行单击事件。于是，在事件中添加防抖机制(setTimeout异步实现) 问题加入防抖机制后，代码报错如下： Uncaught TypeError: Cannot read properties of null (reading 'hasAttribute') at getAttributeValue (clipboard.js?b311:299) at C

事件源e之控制台输出的e.currentTarget为空的原因

Hello World

08-02

1405

事件源e之获取currentTarget 可能会存在一个问题： // 用鼠标移动举例 document.onmousemove=function(e){ console.log(e.currentTarget) // 控制台输出为null } 原因：currentTarget为null原因 tips:点击蓝色字可以跳转到StackOverflow链接通过console.log()去输出会存在问题。尽管如此，在打代码时还是可以直接e.currentTarget获取当前事件处理函数绑定的对象。 .

javascript currentTarget对象介绍

10-30

在 IE 中，document.activeElement 将返回当前获得焦点的对象，而在 Firefox 和 Opera 中，e.currentTarget 将返回当前事件的目标元素。在这个例子中，我们使用了 onclick 事件来触发 show 函数。由于 onclick ...

JS和JQ的event对象区别分析

10-25

因此，理解和区分`event.target`、`event.currentTarget`以及`event.delegateTarget`是非常重要的，特别是当你需要在复杂的DOM结构中进行事件处理时。在实际应用中，理解JS和JQ中的Event对象差异，可以帮助开发者...

专案40.-

02-11

- 事件对象：event对象的属性和方法，如target、currentTarget、eventPhase等。 5. **AJAX异步通信**： - XMLHttpRequest对象：发送HTTP请求，处理响应，以及使用XMLHttpRequest的各个状态。 - Fetch API：使用...

JavaScript_天天造轮子手写面试常见源码.zip

热门推荐

Syleapn的博客

07-30

3万+

在小程序中，e.target与e.currentTarget是非常重要的，尤其是涉及到页面传值时！本节只说两者的区别，关于传值下一节再详细讲解>https://blog.csdn.net/Syleapn/article/details/81290133#comments~ 下面开始正文啦！！先来大概梳理下逻辑，以便引申与更一步了解target与curentTarget。 ...

JS事件对象属性e.target、e.currentTarget和this

qq_39706777的博客

11-09

2788

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。如下图，给 ul 绑定点击事件，然后点击其中某个 li，输出当前的 e.target、e.currentTarget e.target 获取的是实际点击的元素 e.currentTarget 获取的是绑定点击事件的元素事件中的this也是指向当前绑定事件的元素，所以: e.currentTarge === this是一定的，而e.target===this不一定 ...

为什么控制台打印事件对象e时里面的currentTarget为null，而打印e.currentTarget时为DOM对象？

qq_39852145的博客

06-17

2548

<!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的区别

高先生的猫

05-26

937

这两天去面试的两个小伙伴都遇到了一个问题，面试官问到你用jQuery的时候有没有用过target和currentTarget？他们的区别是什么？他们都是一脸懵，平时练习也没有用过currentTarget啊？其实currentTarget这个属性很是鸡肋，其实我们平时也用不到，下面我们通过两个例子说明平时我们为什么用不到：举个例子： <ul> <li>按钮1</li> <li>按钮2</li> <li&g

用CSharp写一个五次攻击敌方单体目标，敌方死亡后自动顺延到下一个目标的代码

02-14

下面是一个C#代码的示例： ``` using System.Collections; public class AttackTarget : MonoBehaviour { public Transform[] targets; private int currentTargetIndex = 0; private void Update() { if (targets.Length == 0) { return; } Transform currentTarget = targets[currentTargetIndex]; if (currentTarget == null) { NextTarget(); return; } if (IsDead(currentTarget)) { NextTarget(); return; } Attack(currentTarget); } private void Attack(Transform target) { // 这里写五次攻击的逻辑 } private bool IsDead(Transform target) { // 这里写判断敌方单体目标是否死亡的逻辑 } private void NextTarget() { currentTargetIndex = (currentTargetIndex + 1) % targets.Length; } } ``` 这份代码实现了五次攻击敌方单体目标，敌方死亡后自动顺延到下一个目标的功能。希望这份代码对你有所帮助！