javascript 中event.target与r的区别

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

#javascript

本文详细解析了 event.target 和 event.currentTarget 的不同之处，前者指触发事件的元素，后者指绑定事件的元素。当事件绑定到同一个元素上时，两者相同；而在事件委托的情况下，它们可能不同。

两者区别其实很是简单。

event.target指的是人操作的元素如点击事件中鼠标点击的元素。

event.currentTarget则是真正发生事件的元素。

两者之间可相等。亦不等。

当事件绑定与元素是同一个元素则相等。委托事件中两者相等否要看人点击了那个元素。

首先本质区别是：

  • event.target返回触发事件的元素

  • event.currentTarget返回绑定事件的元素与this应该相同个人认为


JavaScript技巧：使用event.target和event.srcElement来获取事件目标
TechNovaX的博客
09-23 690
在处理这些事件时，有时我们需要获取事件的目标元素，也就是触发该事件的元素。需要注意的是，event.srcElement只在一些较旧的IE浏览器版本中支持，而在现代的浏览器中，我们应该优先使用event.target来获取事件目标，以保证代码的兼容性。在上面的代码中，我们使用addEventListener方法来监听一个点击事件，并在控制台输出事件的目标元素。在上面的代码中，我们通过直接给document对象的onclick属性赋值的方式来监听点击事件，并输出事件的目标元素。
javascript中的EventTarget
此心安处是吾乡
05-12 276
The W3C DOM EventTarget object is the events module connection with nodes that actually receive events. All node objects (especially text and element nodes in an HTML document tree) implement the Even...
javascript-event.target
sll9711的博客
08-13 656
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main { width: 200px; height: 100px; .
JavaScript中的Event.target
qq_54334713的博客
04-26 8413
event.target 一般情况下我们获取目标事件源都是谁是调用者谁就是事件源，但是当有批量的DOM需要操作的时候，要判断哪一个dom是事件源就不是很明确了，使用e.target可以准确地获取事件源，并且在使用的过程中可以比较判断，从而实现我们的代码。 举个例子：当做一个拖拽的案例的时候，有多个事件源，但是想要知道鼠标点击的是不是我们想要的事件源的时候（例如：其他区域和事件源进行判断），我们就可以使用e.target，比较获取的事件源的Id,classname，nodename... 白话就是：用
JavaScript事件属性event.target
luckybuling
03-14 243
JavaScript事件属性event.target
js中的触发事件对象event.srcElement与event.target详解
10-20
在JavaScript编程中，事件处理是十分重要的一个部分，而事件对象event则是与事件直接相关的对象。event对象中包含多个属性，其中event.srcElement和event.target是两个用来获取触发事件元素的属性。在不同的浏览器中...
event.currentTarget与event.target的区别介绍
09-05
在JavaScript的事件处理中，`event.currentTarget` 和 `event.target` 是两个非常重要的属性，它们在处理DOM元素上的事件时起到关键作用。本文将详细解释这两个属性的区别，并通过实际的测试代码来帮助理解。 首先...
event.target 详解：理解事件目标对象
最新发布
weixin_51288065的博客
06-14 572
在 JavaScript 事件处理中，event.target 是一个关键属性，它表示最初触发事件的 DOM 元素。下面我将通过一个可视化示例详细解释其工作原理和使用场景。
Javascript中event.target与event.currentTarget辨析
理解事件对象中的`target`属性与`currentTarget`属性的区别，是深入掌握JavaScript事件处理机制的关键。在本篇知识点总结中，我们将详细阐述这两个属性的不同之处，并通过示例和应用场景加以说明。 首先，了解事件...
JavaScript Event事件对象
weixin_47782618的博客
04-27 496
1. Event对象属性 2. Event对象方法
Javascript里的EventTarget的应用
weixin_34167043的博客
11-15 148
为什么80%的码农都做不了架构师？>>> ...
JavaScript核心之事件详解（EventTarget接口，js事件传播，Event对象）
上善若泪
05-03 4866
目录 1 EventTarget接口 1.1 addEventListener() 1.1.1 addEventListenerthis对象的指向 1.2 removeEventListener() 1.3 dispatchEvent() 2 监听函数 2.1 HTML标签的on-属性 2.2 Element节点的事件属性 2.3addEventListener方法 3 事件...
javascript学习之EventTarget 接口
白话机器学习
08-05 324
DOM 节点的事件操作（监听和触发），都定义在接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，AudioNode）也部署了这个接口。该接口主要提供三个实例方法。：绑定事件的监听函数：移除事件的监听函数：触发事件。
精通JavaScript事件处理：event.target与currentTarget的区别
weixin_32287387的博客
05-29 1016
在 JavaScript 中，属性在事件处理函数中扮演着重要的角色。当一个事件被触发时，它指向触发事件的最内层元素。无论事件监听器是绑定在哪个元素上，总是能准确地告诉我们事件从哪个具体的DOM元素开始的。事件模型中的允许开发者编写更加灵活的事件处理逻辑，尤其是当事件在DOM树中冒泡时。它与形成鲜明对比，后者引用了绑定事件监听器的元素。这一属性对于实现事件委托和处理动态添加或移除的元素上的事件至关重要。在JavaScript事件处理中，属性是指绑定事件监听器的元素。
event.target的作用
HWL5679的博客
12-19 948
当你点击一个按钮或者在输入框中输入文本时，event.target就会指向那个按钮或输入框。
JS事件介绍
qq_64389127的博客
09-07 662
1)事件侦听EventTarget的方法--添加侦听事件：addEventListener，有三个参数，第三个参数可选addEventListener(事件类型，事件回调函数，是否捕获侦听/事件侦听选项{是否捕获侦听，是否只侦听一次})
javascript事件处理二 事件对象event详解及target和currentTarget区别
ScottePerk的博客
11-09 1926
在处理事件的时候，所有和事件相关的东西都封装到event这个对象里面。所以这个对象非常的重要。这个对象有非常多的内容，我们讨论几个计较常见和以及比较难区别的target和currentTarget。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值