JS 冒泡和捕獲是怎么回事

scola666 發布于2019-08-02 14:29 / 694人閱讀

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

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

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 事件。
至于這三個事件觸發的順序，就是所謂的冒泡和捕獲。

事件觸發經過的三個階段：

捕獲階段：先由文檔的根節點 document 往事件觸發對象，從外向內捕獲事件對象；

定位目標：尋找到目標事件位置（事發地），觸發事件；

冒泡階段：再從目標事件位置往文檔的根節點方向回溯，從內向外冒泡事件對象。

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

總結

冒泡和捕獲的關系，只會出現在包含和被包含的結構中，兄弟關系是不會有這種關系的。
冒泡和捕獲只是方向的不同而已。

GPU云服務器云服務器是怎么回事呢云存儲是怎么回事大數據是怎么回事物聯網是怎么回事

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

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

JS 冒泡和捕獲是怎么回事

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

KavenFan 2019-08-26 13:35 評論0 收藏0
瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解

摘要：目標階段真正點擊的元素的事件發生了兩次，因為在上面的代碼中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發生了兩次。所以很明顯用直接綁定的事件發生在了冒泡階段。如果對事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機制可能還沒有深入的研究實踐一下，我抽時間整理了一下相關的知識。本文主要對事件機制一些細節進行討論，過于基礎的事件綁定知識方法沒有介紹。特別少...

mylxsw 2019-08-21 10:38 評論0 收藏0
javascript 之事件篇

摘要：處于目標階段事件在上發生并處理。冒泡階段事件又傳播回文檔。不支持捕獲事件的。總結二使用事件委托新添加的元素還會有之前的事件。事件對象在觸發某個事件時，會產生一個事件對象。 js 是采用異步事件驅動的機制來響應用戶操作的，也就是說當用戶對某個html元素進行操作的時候，會產生一個事件，該事件會驅動某些函數來處理。事件源：產生事件的地方（html元素，窗口，其他等等)；事件：鼠標事件，鍵盤...

Forest10 2019-08-21 16:17 評論0 收藏0
preventDefault,stopPropagation,return false三者的區別

摘要：與之順序相反的是事件捕獲。可以理解為是的升級版，除了阻止冒泡，還能阻止結束掉當前對象未執行的其它綁定事件方法。作者以樂之名本文原創，有不當的地方歡迎指出。參考文章之間的區別逛帖子的時候看到道友發的前端面試題， preventDefault(), stopPropagation(), return false三者的區別這三者的使用想必大家并不陌生，但是細想之下還是有可究之處。 pre...

bladefury 2019-08-20 19:05 評論0 收藏0