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

周國輝發布于2019-08-30 11:22 / 3305人閱讀

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

事件冒泡與事件捕獲

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

如下：假設三層div都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢

事件冒泡

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

事件捕獲

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

w3c 采用折中的方式，制定了統一的標準——先捕獲再冒泡。

addEventListener第三個參數默認值是false，表示在事件冒泡階段調用事件處理函數;如果參數為true，則表示在事件捕獲階段調用處理函數。

測試事件冒泡-點擊藍色

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

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

測試事件捕獲-點擊藍色

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

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

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

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

這里記被點擊的DOM節點為target節點,document 往 target節點，捕獲前進，遇到注冊的捕獲事件立即觸發執行

到達target節點，觸發事件

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

arget節點往 document 方向，冒泡前進，遇到注冊的冒泡事件立即觸發

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

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

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

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

應用：事件委托（也叫事件代理）

比如我想點擊ul標簽里面的li獲取它的值,有點人就會遍歷去給每個li加一個事件監聽
其實我們可以在li的父級加一個事件監聽，這就相當于把事件監聽委托給了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("藍")
        return true
    }

阻止事件冒泡和事件默認行為

但某一些時候我們不想觸發事件冒泡怎么辦或者是不想觸發默認的一些方法

e.stopPropagation()

這是W3C的標準方法，stopPropagation是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。
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)的一個方法，作用是取消一個目標元素的默認行為。既然是說默認行為，當然是元素必須有默認行為才能被取消，如果元素本身就沒有默認行為，調用當然就無效了。什么元素有默認行為呢？如鏈接，提交按鈕等。當Event 對象的 cancelable為false時，表示沒有默認行為，這時即使有默認行為，調用preventDefault也是不會起作用的。

return false

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

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

云服務器 GPU云服務器 js阻止冒泡事件冒泡事件事件冒泡事件冒泡機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114957.html

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

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。如下：假設三層div都...

Half 2019-08-02 15:29 評論0 收藏0
徹底搞懂JS事件冒泡與捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。如下假設三層都有事件監聽，這時我們點擊的小的藍方框，事件執行的順序是怎么樣的呢紅黃藍事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。如下：假設三層div都...

zhangxiangliang 2019-08-23 18:36 評論0 收藏0
白話解釋 Javascript事件preventDefault,stopPropagation及re

摘要：如圖使用事件捕獲模式注冊事件監聽對最外層，中間層，最內層分別用捕獲模式注冊事件監聽，我們上面說了，如果使用捕獲模式，那么第三個參數應該是，否則則是冒泡模式，如果不聲明，默認為冒泡模式。來源: 個人博客想必好多童鞋都有直接復制粘貼event.preventDefault() 或者event.stopPropagation() 的經歷，但是為什么這樣做不甚了解，今天我們的目的就是要徹...

chanjarster 2019-08-21 15:09 評論0 收藏0
又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...

Ocean 2019-08-19 18:33 評論0 收藏0