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

最新推荐文章于 2022-11-02 18:16:02 发布
最新推荐文章于 2022-11-02 18:16:02 发布
阅读量2.8k 收藏 4
点赞数 3
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39706777/article/details/121228038
版权
本文详细解析了JavaScript事件处理中e.target和e.currentTarget的区别。e.target表示实际触发事件的元素，而e.currentTarget始终指向事件绑定的元素。在事件冒泡或捕获过程中，this与e.currentTarget相同，但e.target可能不同。通过实例展示了如何在ul元素上绑定点击事件并打印点击的li元素，帮助开发者深入理解这两个属性的用法。

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

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

如下图，给 ul 绑定点击事件，然后点击其中某个 li，输出当前的 e.target、e.currentTarget

  • e.target 获取的是实际点击的元素
  • e.currentTarget 获取的是绑定点击事件的元素

事件中的this也是指向当前绑定事件的元素，所以:
e.currentTarge === this是一定的，
而e.target===this不一定

e.target 原生js 没有 $event的 自定义属性值 传参
lyinshaofeng的博客
11-10 593
vue 原生js e.target 没有 $event的 自定义属性值 传参
e.target 和 this 的区别以及键盘事件的应用
m0_72313625的博客
08-30 1429
e.target 返回的是触发事件的对象（元素）this 返回的是绑定事件的对象（元素） 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
e.target与事件委托简例
weixin_30659829的博客
03-18 1158
target定义： 　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： 　　　　event.target 　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...） 　　　　event.target.id　　　　　　　//获取事件触发元素id 　　　　event.target....
JavaScript中事件对象的currentTarget，this和target属性
qq_41700374的博客
10-21 534
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this，currentTarget和target包含相同的值。 var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(eve...
javascript target属性
angleretar的专栏
04-23 1537
srcElement是IE下的属性 target是Firefox下的属性 Chrome浏览器同时有这两个属性 function whichElement(e) { var targ if (!e) var e = window.event if (e.target) targ = e.target else if (e.srcElement) targ = e.srcElement if (t
事件对象e的e.target
weixin_49602426的博客
09-11 3225
事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；事件对象是系统给我们自动创建的，不需要我们传递参数；事件对象只有事件（onclick、click等）存在的时候才会存在；事件对象只是一个形参，我们可以自己命名：event、e、ele等；btn.onclick = function(e){ // 这里的e就是所谓的事件对象e.target}e.target返回的是触发事件的对象（元素）。那么它和this。
Vue里`$event` 中的target和currentTarget的区别
qq_45188736的博客
02-10 1714
$event 中的target和currentTarget的区别 $event是Vue自带的一个属性，可以看到很多属性。有点类似DOM中的event。 讲到这里我们就要提出一下下面两个重要的东西： event.target 触发事件的元素对象 event.currentTarget 绑定事件的元素对象 我们来上案例来讲解一下两者的区别： <body> <div class="app"> <button @click="add($event)">点击
vue.js click点击事件获取当前元素对象的操作
10-14
总结一下，Vue.js中的`click`事件结合`$event`对象，可以帮助我们获取到触发事件的元素，以及元素的属性和内容。`currentTarget`和`target`分别用于获取事件绑定的元素和实际触发事件的元素。在循环列表中，我们还...
jQuery事件对象的属性和方法详解
10-19
事件对象在jQuery中扮演着非常重要的角色，它包含了各种属性和方法来处理和获取事件相关信息。以下是对jQuery事件对象的属性和方法的详解，包括一些常见和重要的属性和方法。 1. event.type event.type属性用于获取...
function(e) { if ( // no bubbling, should always fire. // this is just a safety net in case event.timeStamp is unreliable in // certain weird environments... e.target === e.currentTarget || // event is fired after handler attachment e.timeStamp >= attachedTimestamp || // bail for environments that have buggy event.timeStamp implementations // #9462 iOS 9 bug: event.timeStamp is 0 after history.pushState // #9681 QtWebEngine event.timeStamp is negative value e.timeStamp <= 0 || // #9448 bail if event is fired in another document in a multi-page // electron/nw.js app, since event.timeStamp will be using a different // starting reference e.target.ownerDocument !== document ) { return original.apply(this, arguments) } }
最新发布
06-07
1. `e.target === e.currentTarget`：判断事件的目标元素是否与当前元素相同，如果是，则说明事件没有冒泡，应该立即执行事件处理程序。 2. `e.timeStamp >= attachedTimestamp`：判断事件的时间戳是否大于等于事件...
关于JS中target属性
热门推荐
Aurora_Nil的博客
04-01 1万+
关于JS中target属性的使用 首先先介绍一下target这个属性——触发事件的元素 定义和语法 //定义 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素 //语法 event.target 小结：event.target可以理解为我们当下操作的这个对象，我们通过点击、键盘事件、change等等操作来触发target(理解深度不够 以后会继续完善) 可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用target点击就可获取
JS中的事件对象及属性
wytccc的博客
11-02 598
比如：ul绑定了一个点击事件，鼠标点击ul上的li，则此时的target指向这个li，this指向ul。【返回值：当前按下字母的ASCII码值，区分大小写】【返回值：大写字母的ASCII码值，不区分大小写】【只在keypress事件类型下生效】【只在keydown事件类型下生效】⑤ charCode字符码。事件由谁引起的，就指向谁。④ keyCode键码。② 获取当前鼠标位置。③ 是否按下了控制键。
杂记（关于this与e.target区别以及data-*属性）
banmao8461的博客
08-09 304
1 this与event.target 在编写事件函数时可以传入一个event参数，even参数可以使用一个target属性如even.target用以调用，其作用是指向返回事件的目标节点（触发该事件的节点），这与this是有区别的。 在js中事件属性是会冒泡的，所以在这情况下，如果选用this，那么this是随时变化的，它指向的总是当前触发的事件，而even.ta...
JS中target 属性的使用
qq_53266249的博客
09-01 783
首先，了解target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。当鼠标点击第一个li 时，会提示 你刚刚点击了我 并打印第一个li 标签的内容。我认为 target事件就是会自动判断我们点的哪个元素，下面举例。获取文本内容： tar.textContent。获取父级节点：tar.parentNode。获取节点名称：tar.nodeName。...
JavaScript 事件对象属性e.target和this的区别
火星基地
10-25 1430
前言： Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。 比如： 谁绑定了这个事件。 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。 其中事件对象属性e.target，它和this的指向有所不同。 案例： HTML: <div>div <span&g
[TypeScript]监听事件event.target无法正确的获取属性
ZhuAiQuan的博客
04-24 4644
在使用ts开发项目的背景下，一般给dom添加监听事件时函数会拿到当前的事件对象； 在我们指定了参数是Event后，我们去获取e.target里的属性时ts会提醒我们target里没有这个属性； 类似于这样 明明我们已经指定了事件的类型，为啥获取target里的值的时候会报错呢？？ 经过我多方查阅方才得知，ts无法知道当前这个事件是什么元素的事件的类型，不同dom元素的事件里的target值都不相同； 需要指定当前这个事件具体是什么元素里的HTMLElement类型 比如我这个是div 那我指定他是HTML
DOM的标签属性和对象属性
Bwateree的博客
04-20 1261
一、标签属性 任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性。把写在标签上的属性称为标签属性。标签属性和对象属性是两套系统。 标签系统一般用于展现，对象数据一般用于数据的存储和设置 任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值 div.a=10; 1.设置标签属性 元素.setAttribute(属性名,属性值); 属性名的命名不能使用...
JavaScript-187：常见事件对象属性和方法（target 与this的区别）
臧小川的博客
02-16 203
结构 <div>123</div> <ul> <li>asd</li> <li>asd</li> <li>asd</li> </ul> CSS div { width: 100px; height: 100px; background-color: pink;
e.target和e.currentTarget
qq_41588568的博客
04-26 434
先描述遇到的问题： 我的html代码和js代码分别如下： 第一：div就是每一个菜单的容器，里边的<b></b>标签内存放的是菜单的内容 第二：注意我的点击事件是在div上 这是我修改后的代码，在我修改之前，我使用的是e.target，而这样的情况下，我点击菜单时候，如果点到的是菜单的内容，背景颜色就不会改变，只有鼠标点击到div元素的上边，才会发...
jQuery事件对象属性详解：兼容与常用属性整合
在JavaScript和jQuery中，事件对象起着至关重要的作用，它封装了与事件相关的各种信息，使得开发者能够编写兼容不同浏览器的代码。jQuery在处理事件时，提供了统一的事件对象，简化了开发者的工作，特别是在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值