目录背景冒泡 & 捕获addEventListenertarget & currentTargetfalsetrue区别背景 大家开发中经常会跟DOM的事件打交道，也
大家开发中经常会跟DOM的事件打交道，也会经常用到e.target和e.currentTarget这两个对象，但是却有很多人根本就不知道这两个有什么区别~~~
当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡
<div id="a">
<div id="b">
<div id="c">
<div id="d">哈哈哈哈哈</div>
</div>
</div>
</div>
addEventListener是为元素绑定事件的方法，他接收三个参数：
第一个参数：绑定的事件名
第二个参数：执行的函数
第三个参数：
我们给四个div元素绑定事件，且addEventListener第三个参数不设置，则默认设置为false
const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')
a.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
b.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
c.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
d.addEventListener('click', (e) => {
const {
target,
currentTarget
} = e
console.log(`target是${target.id}`)
console.log(`currentTarget是${currentTarget.id}`)
})
现在我们点击，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序
target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a
我们把四个事件第三个参数都设置为true，我们看看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序
target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d
我们可以总结出：
e.target：触发事件的元素
e.currentTarget：绑定事件的元素
以上就是e.target与e.currentTarget对象的使用区别详解的详细内容，更多关于e.target与e.currentTarget区别的资料请关注编程网其它相关文章！
--结束END--
本文标题: e.target与e.currentTarget对象的使用区别详解
本文链接: https://lsjlt.com/news/153410.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0