Target : ここでのターゲットはイベントソースであり、伝播する場合は、ターゲットから親、本文、HTML、ドキュメント、ウィンドウに伝播します。
ウィンドウのデフォルトの伝播方法はバブリングです
バブリング: イベントが伝播すると、ターゲットから親、本体...ウィンドウに伝播します。
キャプチャ: 最上層から始めて、ターゲットに到達するまで層ごとに下に伝わり、再び下に伝わることはありません。
バブル
<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>