目标:这里的目标就是事件源,传播时,会从目标传播到父级,body,html,document,window
window 默认的传播方式为冒泡
冒泡:事件传播时,从目标开始传播,一直到父级,body…window
捕获:从最顶层开始,逐层向下传递,一直到目标,就不会再往下传递了
冒泡
<style>
#box1 {
width: 500px;
height: 500px;
background-color: pink;
}
#box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div id="box1">
<div id="box2"></div>
</div>
<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var myBody = document.body
box1.onclick = function (e) {
console.log('触发了 box1 的点击事件')
}
*点击box1,打印结果为:触发box1和触发body
box2.onclick = function () {
console.log('触发了 box2 的点击事件')
}
*点击box2,打印结果为:触发box2,触发box1,触发body
myBody.onclick = function () {
console.log('触发了 body 的点击事件')
}
*点击body ,打印结果为:触发body
</script>
捕获
<style>
#box1 {
width: 500px;
height: 500px;
background-color: pink;
}
#box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div id="box1">
<div id="box2"></div>
</div>
<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var myBody = document.body
* 捕获,需要传递第三个参数为true
* addEventListener 第三个参数默认值为 false 代表传播方式为冒泡
* 如果想改变传播方式为捕获, 那么需要将第三个参数传递为true
box1.addEventListener('click', function () {
console.log('触发了 box1 的点击事件')
}, true)
*点击box1,打印结果为:触发body和触发box1
box2.addEventListener('click', function () {
console.log('触发了 box2222 的点击事件')
}, true)
*点击box2,打印结果为:触发body,触发box1,触发box2
myBody.addEventListener('click', function () {
console.log('触发了 body 的点击事件')
}, true)
*点击body ,打印结果为:触发body
</script>