深入理解事件流、事件冒泡、事件捕獲

事件流

Dom事件流將事件分為三個階段：捕獲階段、目標階段、冒泡階段。先調用捕獲階段的處理函數，再調用目標階段的處理函數，最后調用冒泡階段的處理函數。

​

舉例

<div id="boxA">
    <div id="boxB">
        <div id="boxC"></div>
    </div>
</div>
<script>
    var a = document.getElementById('boxA');
    var b = document.getElementById('boxB');
    var c = document.getElementById('boxC');

    // 目標對象,冒泡還是捕獲無所謂
    c.addEventListener('click',function(){console.log('bubbleC')},false)
    c.addEventListener('click',function(){console.log('captureC')},true)
    
    // 事件捕獲
    a.addEventListener('click',function(){console.log('captureA')},true)
    b.addEventListener('click',function(){console.log('captureB')},true)
    
    // 事件冒泡
    a.addEventListener('click',function(){console.log('bubbleA')},false)
    b.addEventListener('click',function(){console.log('bubbleB')},false)
</script>

打印結果是： captureA --> captureB --> bubbleC -->captureC --> bubbleB --> bubbleA

結論

第三個參數unCapture = false 意味着：將事件處理函數加入到冒泡階段，在冒泡階段會被調用；useCapture = true意味着：將事件處理函數加入到捕獲階段，在捕獲階段會被調用。而在觸發事件的目標對象上綁定的函數，冒泡還是捕獲無所謂，都是在目標階段被調用的，執行順序是先注冊的先執行。

事件冒泡機制、事件捕獲機制

事件捕獲和事件冒泡就是事件流的兩個過程。

阻止事件冒泡和捕獲

通過event.stopPropagation()阻止事件的繼續傳播。

舉例

打印結果：captureA

原因：阻止了事件的繼續傳播，事件流走到captureA就不往下走了

<div id="boxA">
    <div id="boxB">
        <div id="boxC"></div>
    </div>
</div>
<script>
    var a = document.getElementById('boxA');
    var b = document.getElementById('boxB');
    var c = document.getElementById('boxC');

    // 目標對象,冒泡還是捕獲無所謂
    c.addEventListener('click',function(){console.log('bubbleC')},false)
    c.addEventListener('click',function(){console.log('captureC')},true)

    // 事件捕獲
    a.addEventListener('click',function(event){
        console.log('captureA');
        event.stopPropagation(); // 阻止事件的傳播
    },true)
    b.addEventListener('click',function(){console.log('captureB')},true)

    // 事件冒泡
    a.addEventListener('click',function(){console.log('bubbleA')},false)
    b.addEventListener('click',function(){console.log('bubbleB')},false)
</script>

參考文章：https://www.jb51.net/article/94394.htm