currentTarget和 target的区别

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

转载最新推荐文章于 2025-05-29 14:47:16 发布 · 7k 阅读

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文解析了JavaScript事件处理中的target与currentTarget的区别，包括它们在事件捕获和冒泡阶段的行为差异，并通过实例代码展示了如何使用这两个属性。

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

最近面试被问到这个问题，还是感叹自己是个小白啊。面试官问我target和currentTarget的区别。

本文大多出自于一个掘金博主的文章点击打开链接

target在事件流的冒泡阶段；

currentTarget在事件流的捕获，冒泡阶段。只有当事件流处在冒泡阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，

target指向被单击的对象

currentTarget指向当前事件活动的对象（一般为父级）。

事件的冒泡和捕获通过两张图来了解一下吧

事件捕获

事件冒泡

事件的捕获就是当点击一个元素的时候，事件会在这个元素的祖先元素找下来。

而冒泡阶段就是相反了，当捕获阶段完成后就进行冒泡阶段，从元素再找回祖先节点。

我们给元素绑定一个时间的时候用到了addEventListener()这个函数，一般我们用两个参数。当第三个参数不指定或者为false时，会默认将这个时间绑定在冒泡阶段。当第三个参数为true时，就会把这个时间绑定在捕获阶段。

然后再来看一段代码：

<body>
    <div id="a">
        <div id="b">
            <div id="c">
                <div id="d"></div>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('a').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
        });
        document.getElementById('b').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
        });
        document.getElementById('c').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
        });
        document.getElementById('d').addEventListener('click', function ( e ) {
            console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
        });
    </script>
</body>

这段代码点击d时输出如下：