事件流

事件流

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。

感谢学长在这篇文章中详细解释：【回来补坑】浅谈Javascript事件机制