JS 冒泡和捕捉是怎么回事

看网上说的也不是太邃晓，我给重新整理下。 参阅：
https://www.cnblogs.com/alvin…

冒泡和捕捉是指在元素上的事宜被触发的时刻，js 通报事宜的两种方向，或者说历程。

媒介：

如，有这么一个页面 和 js 要领

Less: 我用 less写的，假如没有 less 环境，能够疏忽这段。

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

<div id="lv1" class="level">
    <div id="lv2" class="level">
        <div id="lv3" class="level">
            <div id="lv4" class="level">

            </div>
        </div>
    </div>
</div>

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $('lv1').addEventListener("click",()=>{console.log('lv1')},true);
    $('lv2').addEventListener("click",()=>{console.log('lv2')},true);
    $('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
// 上面的 () => {} 为 ES6 的匿名要领的定义体式格局
// 等同于
function () {
    console.log('lv1')
}

上面的 js 做的事：
在页面载入的时刻，给三个 div 增加 click 监听要领，本身被点击的时刻会在 console 中输出本身的 id 值。

页面的构造是如许的 lv1 包括 lv2，lv2 又包括 lv3，当点击 lv3 的时刻，实在也点击了 lv2 和 lv1，由于 lv3 在 lv2 内部，点击 lv3 的时刻，天然也点击了 lv2 和 lv1，也就是说，点击 lv3 的时刻，会触发三个 click 事宜。
至于这三个事宜触发的递次，就是所谓的 冒泡 和 捕捉。

事宜触发经由的三个阶段：

1. 捕捉阶段：先由文档的根节点 document 往事宜触发对象，从外向内捕捉事宜对象；
2. 定位目的：寻觅到目的事宜位置（事发地），触发事宜；
3. 冒泡阶段：再从目的事宜位置往文档的根节点方向回溯，从内向外冒泡事宜对象。

1. 捕捉阶段

如上面的例子，在 lv3 被点击的时刻，js 会从文档的最上层最先，由外向内寻觅点击事宜的劈头，也就是 lv3。那末这个由外向内的历程就是 lv1 –> lv2 –> lv3，这三个 div 的 click 事宜根据这个历程顺次被触发。
这个触发的方向就是捕捉的方向。

2. 冒泡阶段

在找到被点击的 lv3 以后，事宜向上通报，历程是 lv3 –> lv2 –> lv1，此时顺次触发 lv3、lv2、lv1 的 click 事宜，这个由内向外的触发历程就称为冒泡

再回看一下最经常使用的事宜绑定要领的花样：

element.addEventListener(event, function, useCapture)

这内里，useCapture 是个布尔值，用于定义事宜是在冒泡阶段触发，照样在捕捉阶段触发，默认值是 false，代表在冒泡时触发。

此时你就会晓得上面谁人例子里定义的 click 要领是在 捕捉阶段 实行，那末返回的效果就是

lv1
lv2
lv3

假如最上面的例子，onload 内容是如许的

 window.onload = () => {
        $('lv1').addEventListener("click",()=>{console.log('lv1')},false);
        $('lv2').addEventListener("click",()=>{console.log('lv2')},false);
        $('lv3').addEventListener("click",()=>{console.log('lv3')},false);
    };

那末也就是说， click 事宜在 冒泡阶段触发，返回的效果就是

lv3
lv2
lv1

总结

冒泡和捕捉的关联，只会出现在包括和被包括的构造中，兄弟关联是不会有这类关联的。
冒泡和捕捉只是方向的差别罢了。