<html>
<div id='c' style="background: red;padding: 10px;">
c
<div id='b' style="background: yellow;padding: 10px;">
b
<div id='a' style="background: blue;padding: 10px;">
a
</div>
</div>
</div>
<script>
var a = document.getElementById('a')
var b = document.getElementById('b')
var c = document.getElementById('c')
a.onclick = (e) => console.log('点击1')
window.addEventListener("click", (e) => {
console.log('捕获 window')
}, true)
document.addEventListener("click", (e) => {
console.log('捕获 document')
}, true)
a.addEventListener("click", (e) => {
console.log('捕获 a')
}, true)
b.addEventListener("click", (e) => {
console.log('捕获 b')
}, true)
c.addEventListener("click", (e) => {
console.log('捕获 c')
}, true)
window.addEventListener("click", (e) => {
console.log('冒泡 window')
})
document.addEventListener("click", (e) => {
console.log('冒泡 document')
})
a.addEventListener("click", (e) => {
console.log('冒泡 a')
})
b.addEventListener("click", (e) => {
console.log('冒泡 b')
})
c.addEventListener("click", (e) => {
console.log('冒泡 c')
})
a.onclick = (e) => console.log('点击2')
</script>
</html>
知识点：
- 事件先经过捕获，然后执行，最后冒泡
- onclick在冒泡阶段执行
- addEventListener可以根据第三个参数，默认是false，在冒泡阶段执行。如果设置为true，则在捕获阶段执行。
- addEventListener可以对同一个元素绑定多个事件，从上到下依次执行。而onclick只能绑定一个事件，后面的事件会覆盖前面的事件。
根据知识点，写下点击a的输出顺序
捕获 window --> 捕获 document --> 捕获 c --> 捕获 b --> 捕获 a --> 点击2 --> 冒泡 a --> 冒泡 b --> 冒泡 c --> 冒泡 document --> 冒泡 window
