event.target 和 event.currentTarget 的区别

本文详细解析了JavaScript中event.target和event.currentTarget的区别。在冒泡阶段,event.target指向触发事件的元素,而event.currentTarget始终指向事件绑定的元素。通过一个例子展示了在冒泡和捕获阶段两者如何变化,帮助读者深入理解这两个事件属性。

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

笔记https://www.cnblogs.com/yzhihao/p/9398917.html

结合下面的例子,就可以很好来理解event.target和event.currentTarget:

上面事件的绑定都是在冒泡阶段的,当我们点击最里层的元素d的时候,会依次输出:

target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a
从输出中我们可以看到,event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget。

如果我们把事件都绑定在捕获阶段,然后还是点击最里层的元素d,这时event.target还依旧会指向d,因为那是引起事件触发的元素,因为event.currentTaget指向事件绑定的元素,所以在捕获阶段,最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下:

target:d&currentTarget:a
target:d&currentTarget:b
target:d&currentTarget:c
target:d&currentTarget:d

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值