成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

JS 冒泡和捕獲是怎么回事

scola666 / 699人閱讀

摘要：冒泡和捕獲是怎么回事看網(wǎng)上說(shuō)的也不是太明白，我給重新整理下。參閱冒泡和捕獲是指在元素上的事件被觸發(fā)的時(shí)候，傳遞事件的兩種方向，或者說(shuō)過(guò)程。至于這三個(gè)事件觸發(fā)的順序，就是所謂的冒泡和捕獲。冒泡和捕獲只是方向的不同而已。

JS 冒泡和捕獲是怎么回事 
看網(wǎng)上說(shuō)的也不是太明白，我給重新整理下。 參閱：https://www.cnblogs.com/alvin...

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

前言：

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

Less: 我用 less寫(xiě)的，如果沒(méi)有 less 環(huán)境，可以無(wú)視這段。
.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

    

        

            


            

        

    


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

頁(yè)面的結(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，也就是說(shuō)，點(diǎn)擊 lv3 的時(shí)候，會(huì)觸發(fā)三個(gè) click 事件。
至于這三個(gè)事件觸發(fā)的順序，就是所謂的 冒泡 和 捕獲。

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

捕獲階段：先由文檔的根節(jié)點(diǎn) document 往事件觸發(fā)對(duì)象，從外向內(nèi)捕獲事件對(duì)象；

定位目標(biāo)：尋找到目標(biāo)事件位置（事發(fā)地），觸發(fā)事件；

冒泡階段：再?gòu)哪繕?biāo)事件位置往文檔的根節(jié)點(diǎn)方向回溯，從內(nèi)向外冒泡事件對(duì)象。

1. 捕獲階段

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

2. 冒泡階段

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

再回看一下最常用的事件綁定方法的格式： 
element.addEventListener(event, function, useCapture)

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

此時(shí)你就會(huì)知道上面那個(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);
    };

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

lv3
lv2
lv1
總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53842.html

相關(guān)文章

  • JS 冒泡和捕獲是怎么回事

    摘要：冒泡和捕獲是怎么回事看網(wǎng)上說(shuō)的也不是太明白，我給重新整理下。參閱冒泡和捕獲是指在元素上的事件被觸發(fā)的時(shí)候，傳遞事件的兩種方向，或者說(shuō)過(guò)程。至于這三個(gè)事件觸發(fā)的順序，就是所謂的冒泡和捕獲。冒泡和捕獲只是方向的不同而已。 JS 冒泡和捕獲是怎么回事 看網(wǎng)上說(shuō)的也不是太明白，我給重新整理下。 參閱：https://www.cnblogs.com/alvin... 冒泡和捕獲是指在元素上的事...

    KavenFan 評(píng)論0 收藏0

  • 瀏覽器事件模型中捕獲階段、目標(biāo)階段、冒泡階段實(shí)例詳解

    摘要：目標(biāo)階段真正點(diǎn)擊的元素的事件發(fā)生了兩次，因?yàn)樵谏厦娴拇a中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發(fā)生了兩次。所以很明顯用直接綁定的事件發(fā)生在了冒泡階段。 如果對(duì)事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機(jī)制可能還沒(méi)有深入的研究實(shí)踐一下，我抽時(shí)間整理了一下相關(guān)的知識(shí)。 本文主要對(duì)事件機(jī)制一些細(xì)節(jié)進(jìn)行討論，過(guò)于基礎(chǔ)的事件綁定知識(shí)方法沒(méi)有介紹。 特別少...

    mylxsw 評(píng)論0 收藏0

  • javascript 之 事件篇

    摘要：處于目標(biāo)階段事件在上發(fā)生并處理。冒泡階段事件又傳播回文檔。不支持捕獲事件的?？偨Y(jié)二使用事件委托新添加的元素還會(huì)有之前的事件。事件對(duì)象在觸發(fā)某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象。 js 是采用異步事件驅(qū)動(dòng)的機(jī)制來(lái)響應(yīng)用戶操作的，也就是說(shuō)當(dāng)用戶對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)事件，該事件會(huì)驅(qū)動(dòng)某些函數(shù)來(lái)處理。事件源：產(chǎn)生事件的地方（html元素，窗口，其他等等)；事件：鼠標(biāo)事件，鍵盤(pán)...

    Forest10 評(píng)論0 收藏0

  • preventDefault,stopPropagation,return false三者的區(qū)別

    摘要：與之順序相反的是事件捕獲。可以理解為是的升級(jí)版，除了阻止冒泡，還能阻止結(jié)束掉當(dāng)前對(duì)象未執(zhí)行的其它綁定事件方法。作者以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。參考文章之間的區(qū)別 逛帖子的時(shí)候看到道友發(fā)的前端面試題， preventDefault(), stopPropagation(), return false三者的區(qū)別 這三者的使用想必大家并不陌生，但是細(xì)想之下還是有可究之處。 pre...

    bladefury 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<