简单探讨event.target和event.currentTarget的区别

最新推荐文章于 2025-05-29 14:47:16 发布

.ToString()°

最新推荐文章于 2025-05-29 14:47:16 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端 es6/es7

本文链接：https://blog.csdn.net/weixin_47809584/article/details/122156770

JS 专栏收录该内容

15 篇文章

订阅专栏

本文详细探讨了DOM事件处理中的event.target和event.currentTarget的区别。event.target表示触发事件的元素，而event.currentTarget始终指向事件绑定的元素。在处理含有多个子元素的事件时，event.currentTarget能确保获取到正确绑定事件的节点，而event.target则用于定位到实际触发事件的具体子元素。了解这两者的区别有助于更精确地控制事件处理逻辑。

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

简单探讨event.target和event.currentTarget的区别

对于Dom对象的事件的认识，可能我们最熟悉的就是给一个按钮绑定一个点击事件，如果想要获取该按钮的一些事件属性，我们无疑会给回调函数传递一个event事件对象。在这个事件对象中，event.target和event.currentTarget同样都能获取该Dom对象，但是具体还是有一些不同。

1. 对比getElementsByTagName()、getElementById()、getElementsByClassName()获取Dom对象的方法。

<div class="container" id="containerid">
        <div class="box"></div>
        <div class="box"></div>
</div>

//通过标签名称获取Dom集合
let divAll = document.getElementsByTagName("div");
//通过id获取Dom元素
let divDomId = document.getElementById("containerid");
//通过classname获取Dom集合
let divDomClass = document.getElementsByClassName("container");
console.log("//getElementsByTagName",divAll)
console.log("//getElementsByClassName",divDomClass);
console.log(divDomClass[0]);
console.log("//getElementById",divDomId)

在这里插入图片描述
之前总是用getElementById()方法获取Dom对象，今天使用getElementsByClassName()方法发现直接获取不到。输出到控制台之后才发现，原来getElementsByClassName()获取的也是一个Dom集合，需要取数组的第一个元素才能获取该Dom元素。

这里只是发现了一个自己之前没有注意到地方。下面，废话不多说了，我们就简单研究一下event.target和event.currentTarget的不同。

2. 关于event里的target属性

2.1 event事件对象

let divAll = document.getElementsByTagName("div");
    divAll[0].addEventListener("click",e => {
        let event = e || window.event;
        console.log(event);
    })

我们点击div时，触发的event事件对象输出如下：
event对象中具体的target属性：
我们直接输出event.target:

这里面有很多属性，但是我们通常使用都是为了，触发事件的节点（内置属性，系统自带的内部属性）从而对该节点进行一些动作。

3. 关于event里的currentTarget属性

绑定事件的节点中，使用event.currentTarget返回的是绑定事件的节点。
我们发现我们绑定的是最外层的div节点，我们点击它或者它的子div节点，触发的都是绑定事件的元素，也就是最外层的div。

具体差别

通俗点来说就是：
- event.target返回的是，触发事件的元素
- event.currentTarget返回的是，绑定事件的元素
如果说是一个单标签绑定的事件可以使用以上任意两种方法都是可行的；
如果你所绑定事件的标签内还有多个子标签的话建议使用 event.currentTarget。或者使用事件监听，这样，event.currentTarget就能拿到绑定事件的节点，而在其下的各种后代节点就可以用event.target.（各种类名，id，标签名，属性值）来具体指向到触发事件的节点。