徹底搞懂JS事件冒泡與捕獲

Half 發(fā)布于2019-08-02 15:29 / 1394人閱讀

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。如下假設(shè)三層都有事件監(jiān)聽，這時我們點擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢紅黃藍(lán)事件冒泡微軟提出了名為事件冒泡的事件流。

事件冒泡與事件捕獲

事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。

如下：假設(shè)三層div都有事件監(jiān)聽，這時我們點擊的小的藍(lán)方框，事件執(zhí)行的順序是怎么樣的呢

紅
    
        黃
        藍(lán)

事件冒泡

微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內(nèi)層的元素開始發(fā)生，一直向上傳播，直到document對象。
因此在事件冒泡的概念下在div元素上發(fā)生click事件的順序應(yīng)該是div -> body -> html -> document

事件捕獲

網(wǎng)景提出另一種事件流名為事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發(fā)生，直到最具體的元素。
因此在事件捕獲的概念下在div元素上發(fā)生click事件的順序應(yīng)該是document -> html -> body -> div -> div

w3c 采用折中的方式，制定了統(tǒng)一的標(biāo)準(zhǔn)——先捕獲再冒泡。

addEventListener第三個參數(shù)默認(rèn)值是false，表示在事件冒泡階段調(diào)用事件處理函數(shù);如果參數(shù)為true，則表示在事件捕獲階段調(diào)用處理函數(shù)。

測試事件冒泡-點擊藍(lán)色

    s1 = document.getElementById("s1")
    s2 = document.getElementById("s2")
    s3 = document.getElementById("s3")

    s1.addEventListener("click",function(e){
        console.log("紅 冒泡事件");//從底層往上
    },false);//第三個參數(shù)默認(rèn)值是false，表示在事件冒泡階段調(diào)用事件處理函數(shù);如果參數(shù)為true，則表示在事件捕獲階段調(diào)用處理函數(shù)。
    s2.addEventListener("click",function(e){
        console.log("黃 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("藍(lán) 冒泡事件");
    },false);

測試事件捕獲-點擊藍(lán)色

s1.addEventListener("click",function(e){
        console.log("紅 捕獲事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黃 捕獲事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("藍(lán) 捕獲事件");
    },true);

事件捕獲與事件冒泡同時存在-先捕獲后冒泡

這里記被點擊的DOM節(jié)點為target節(jié)點,document 往 target節(jié)點，捕獲前進(jìn)，遇到注冊的捕獲事件立即觸發(fā)執(zhí)行

到達(dá)target節(jié)點，觸發(fā)事件

對于target節(jié)點上，是先捕獲還是先冒泡則捕獲事件和冒泡事件的注冊順序，先注冊先執(zhí)行

arget節(jié)點往 document 方向，冒泡前進(jìn)，遇到注冊的冒泡事件立即觸發(fā)

    s1.addEventListener("click",function(e){
        console.log("紅 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("黃 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("藍(lán) 冒泡事件");
    },false);

    s1.addEventListener("click",function(e){
        console.log("紅 捕獲事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黃 捕獲事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("藍(lán) 捕獲事件");
    },true);

應(yīng)用：事件委托（也叫事件代理）

比如我想點擊ul標(biāo)簽里面的li獲取它的值,有點人就會遍歷去給每個li加一個事件監(jiān)聽
其實我們可以在li的父級加一個事件監(jiān)聽，這就相當(dāng)于把事件監(jiān)聽委托給了ul
我們點擊li的時候是會打出值的

ul = document.getElementById("ur")

    ul.addEventListener("click",function(e){
        console.log(e.target.innerText);
    },false);

onclick事件分析

onclick不能像addEventListener那樣指定是事件類型，它只能是事件冒泡

    s1.onclick=function(){
        console.log("紅")
    }
    s2.onclick=function(){
        console.log("黃")
    }
    s3.onclick=function(){
        console.log("藍(lán)")
        return true
    }

阻止事件冒泡和事件默認(rèn)行為

但某一些時候我們不想觸發(fā)事件冒泡怎么辦或者是不想觸發(fā)默認(rèn)的一些方法

e.stopPropagation()

這是W3C的標(biāo)準(zhǔn)方法，stopPropagation是事件對象(Event)的一個方法，作用是阻止目標(biāo)元素的冒泡事件，但是會不阻止默認(rèn)行為。
IE使用的是IE則是使用e.cancelBubble = true

function stopBubble(e) { 
//如果提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否則，我們需要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

e.preventDefault()

preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標(biāo)元素的默認(rèn)行為。既然是說默認(rèn)行為，當(dāng)然是元素必須有默認(rèn)行為才能被取消，如果元素本身就沒有默認(rèn)行為，調(diào)用當(dāng)然就無效了。什么元素有默認(rèn)行為呢？如鏈接，提交按鈕等。當(dāng)Event 對象的 cancelable為false時，表示沒有默認(rèn)行為，這時即使有默認(rèn)行為，調(diào)用preventDefault也是不會起作用的。

return false

javascript的return false只會阻止默認(rèn)行為，而是用jQuery的話則既阻止默認(rèn)行為又防止對象冒泡。

//阻止瀏覽器的默認(rèn)行為 總結(jié)
function stopDefault( e ) { 
    //阻止默認(rèn)瀏覽器動作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數(shù)器默認(rèn)動作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

GPU云服務(wù)器云服務(wù)器 js阻止冒泡事件冒泡事件事件冒泡事件冒泡機制

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

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

發(fā)表評論

登陸后可評論

0條評論

Half

男|高級講師

我要關(guān)注我要私信

TA的文章

Nextarray：雙十一，VPS和獨服5折優(yōu)惠，月付0.99美金起，特價雙E5/192G內(nèi)存/6

閱讀 1549·2021-11-04 16:10
【小白+python+selenium庫+圖片爬取+反爬+資料】超詳細(xì)新手實現(xiàn)（01）webdriv

閱讀 2806·2021-09-30 09:48
mockjs讓前端開發(fā)獨立于后端

閱讀 2849·2019-08-29 11:31
css定位案例探討（position屬性詳解）

閱讀 1587·2019-08-28 18:22
瀏覽器內(nèi)核

閱讀 3239·2019-08-26 13:44
DIY 一個 Vuex 持久化插件

閱讀 1329·2019-08-26 13:42
數(shù)據(jù)類型對象

閱讀 2855·2019-08-26 10:20
讓前端監(jiān)控數(shù)據(jù)采集更高效

閱讀 764·2019-08-23 17:00

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

徹底搞懂JS事件冒泡與捕獲

相關(guān)文章