currentTarget和 target的区别

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

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

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

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

target在事件流的冒泡阶段;

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

target指向被单击的对象

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


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

事件捕获

image
事件冒泡

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

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

我们给元素绑定一个时间的时候用到了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时输出如下:

event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarge。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值