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

事件流

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