事件流
<div class="father">
<div class="son">
<button id="btn">btn</button>
</div>
</div>
const father = document.querySelector('.father')
const son = document.querySelector('.son')
const btn = document.querySelector('#btn')
father.addEventListener('click',function(){
console.log('冒泡阶段的fatherdiv事件');
},false)
son.addEventListener('click',()=>{
console.log('捕获阶段的sondiv事件');
},true)
btn.addEventListener('click',()=>{
console.log('捕获阶段的btn事件');
},true)
btn.addEventListener('click',()=>{
console.log('冒泡阶段的btn事件');
},false)
son.addEventListener('click',()=>{
console.log('冒泡阶段的sondiv事件');
},false)
father.addEventListener('click',()=>{
console.log('捕获阶段的fatherdiv事件');
},true)
document.addEventListener('click',()=>{
console.log('捕获阶段的doc');
},true)
document.addEventListener('click',()=>{
console.log('冒泡阶段的doc');
},false)
可以看到,捕获就是从document开始找,一直找到点击的那个元素为止。然后开始冒泡,从停止的那个元素开始冒泡,一直冒泡到document。