什么是JavaScript冒泡和捕獲

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)什么是JavaScript冒泡和捕獲，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

JS 冒泡和捕獲是怎么回事

冒泡和捕獲是指在元素上的事件被觸發(fā)的時(shí)候，js 傳遞事件的兩種方向，或者說過程。

前言：

如，有這么一個(gè)頁面 和 js 方法

Less: 我用 less寫的，如果沒有 less 環(huán)境，可以無視這段。

.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 做的事：
在頁面載入的時(shí)候，給三個(gè) div添加 click  監(jiān)聽方法，自己被點(diǎn)擊的時(shí)候會在 console 中輸出自己的 id 值。

頁面的結(jié)構(gòu)是這樣的  lv1 包含 lv2，lv2 又包含 lv3，當(dāng)點(diǎn)擊 lv3 的時(shí)候，其實(shí)也點(diǎn)擊了 lv2 和 lv1，因?yàn)?lv3 在 lv2 內(nèi)部，點(diǎn)擊 lv3 的時(shí)候，自然也點(diǎn)擊了 lv2 和 lv1，也就是說，點(diǎn)擊 lv3 的時(shí)候，會觸發(fā)三個(gè) click 事件。
至于這三個(gè)事件觸發(fā)的順序，就是所謂的 冒泡  和 捕獲。

事件觸發(fā)經(jīng)過的三個(gè)階段：

1. 捕獲階段：先由文檔的根節(jié)點(diǎn) document 往事件觸發(fā)對象，從外向內(nèi)捕獲事件對象；
2. 定位目標(biāo)：尋找到目標(biāo)事件位置（事發(fā)地），觸發(fā)事件；
3. 冒泡階段：再從目標(biāo)事件位置往文檔的根節(jié)點(diǎn)方向回溯，從內(nèi)向外冒泡事件對象。

1. 捕獲階段

如上面的例子，在 lv3 被點(diǎn)擊的時(shí)候，js 會從文檔的最上層開始，由外向內(nèi)尋找點(diǎn)擊事件的起源，也就是 lv3。那么這個(gè)由外向內(nèi)的過程就是 lv1 --> lv2 --> lv3，這三個(gè) p 的 click 事件按照這個(gè)過程依次被觸發(fā)。
這個(gè)觸發(fā)的方向就是捕獲的方向。

2. 冒泡階段

在找到被點(diǎn)擊的 lv3 之后，事件向上傳遞，過程是 lv3 --> lv2 --> lv1，此時(shí)依次觸發(fā) lv3、lv2、lv1 的 click 事件，這個(gè)由內(nèi)向外的觸發(fā)過程就稱為冒泡

再回看一下最常用的事件綁定方法的格式：

element.addEventListener(event, function, useCapture)

這里面，useCapture 是個(gè)布爾值，用于定義事件是在冒泡階段觸發(fā)，還是在捕獲階段觸發(fā)，默認(rèn)值是 false，代表在冒泡時(shí)觸發(fā)。

此時(shí)你就會知道上面那個(gè)例子里定義的 click 方法是在 捕獲階段 執(zhí)行，那么返回的結(jié)果就是

lv1
lv2
lv3

如果最上面的例子，onload 內(nèi)容是這樣的

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

那么也就是說， click 事件在 冒泡階段觸發(fā)，返回的結(jié)果就是

lv3
lv2
lv1

總結(jié)

冒泡和捕獲的關(guān)系，只會出現(xiàn)在包含和被包含的結(jié)構(gòu)中，兄弟關(guān)系是不會有這種關(guān)系的。
冒泡和捕獲只是方向的不同而已。

上述就是小編為大家分享的什么是JavaScript冒泡和捕獲了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。