持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情
🎈大家好，我是
橙橙子，新人初来乍到，请多多关照~📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~
冒泡 & 捕获
当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，这个过程叫做捕获，而到达此元素之后，又会向其祖先元素传播上去，个过程叫做冒泡
<div id="a">
<div id="b">
<div id="c">
<div id="d">哈哈哈哈哈</div>
</div>
</div>
</div>
addEventListener
addEventListener是为元素绑定事件的方法，其方法接收三个参数：
-
第一个参数：绑定的事件名
-
第二个参数：执行的函数
-
第三个参数：
- false：默认，代表冒泡时绑定
- true：代表捕获时绑定
target & currentTarget
false
举个栗子：
给四个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}`)
})
点击div，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序
结果：
target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a
true
同样的，我们再次把这四个事件第三个参数都设置为true，查看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序
target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d
区别
于是我们可以总结出：
e.target：触发事件的元素e.currentTarget：绑定事件的元素
e是事件对象，可以携带额外的信息
