事件冒泡和傳播

wenshi11019 發(fā)布于2019-08-23 10:59 / 2154人閱讀

摘要：事件冒泡和傳播舉栗子事件輸出事件有兩種，一種為事件傳播，一種是事件冒泡事件傳播和事件冒泡這還要從遙遠的荒誕說起，兩家網(wǎng)景和，為了能爭奪市場，互相使用相反的技術，當網(wǎng)景使用事件傳播的時候，使用事件冒泡。

事件冒泡和傳播
舉栗子
事件輸出hello world
事件有兩種，一種為事件傳播，一種是事件冒泡

事件傳播和事件冒泡

這還要從遙遠的荒誕說起，兩家網(wǎng)景和ie，為了能爭奪市場，互相使用相反的技術，當網(wǎng)景使用事件傳播的時候，ie使用事件冒泡。（兩個正好相反）這個時候w3c來了，為了能規(guī)范規(guī)定，直接取折中，當事件發(fā)生時，先發(fā)生向下傳播，當?shù)降琢艘院笤俅问褂檬录芭荩饾u的冒泡到頂層window

DOM為一個完整的樹

使用事件傳播輸出hello world

html如下

 

  
      
      
    Hello world
  
  
    
        
            點擊這里

css如下

* {
    margin:0;
    padding:0;
    border:0;
}

#div1 {
    width:300px;
    height:300px;
    background:#c7e0d9;
    position:relative;
}

#div2 {
    width:100px;
    height:100px;
    background:#8ac3d8;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    text-align:center;
    line-height:100px;
}

顯示的效果如下

下面書寫js

冒泡

先使用冒泡

// 獲取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 綁定事件
// 當單擊外部方框的時候
div1.addEventListener("click", () => {
    alert("hello world! 你點擊的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你點擊的是內框");
}, false);
div3.addEventListener("click", () => {
    alert("hello world! 你點擊的是文字");
}, false);

當為false的時候為冒泡。否則為事件傳播

冒泡為上，事件傳播為下，事件傳播優(yōu)于事件冒泡

可以明確的知道，此時為false為冒泡，即全部向上傳播，這個比較簡單不在闡述

阻止進一步冒泡

// 獲取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 綁定事件
// 當單擊外部方框的時候
div1.addEventListener("click", () => {
    alert("hello world! 你點擊的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你點擊的是內框");
    event.stopPropagation();    // 阻止該事件進一步傳播
}, false);
div3.addEventListener("click", () => {
    alert("hello world! 你點擊的是文字");
}, false);

js如上，在div2內部使用event.stopPropagation()阻止進一步冒泡
結果如下

可以看到明顯的被阻擋

傳播

傳播方向更冒泡相反，為向下，且傳播優(yōu)先于冒泡
并且事件先進行向上傳，直到遇到設置為冒泡的元素的時候，停止向上傳，開始進行從上到下的捕獲，先最外層捕獲，然后逐層捕獲，直到完成。

// 獲取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 綁定事件
// 當單擊外部方框的時候
div1.addEventListener("click", () => {
    alert("hello world! 你點擊的是外框！");
}, true);
div2.addEventListener("click", () => {
    alert("hello world! 你點擊的是內框");
}, true);
div3.addEventListener("click", () => {
    alert("hello world! 你點擊的是文字");
}, true);

傳播優(yōu)先于冒泡

js如下

// 獲取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 綁定事件
// 當單擊外部方框的時候
div1.addEventListener("click", () => {
    alert("hello world! 你點擊的是外框！");
}, false);
div2.addEventListener("click", () => {
    alert("hello world! 你點擊的是內框");
}, true);
div3.addEventListener("click", () => {
    alert("hello world! 你點擊的是文字");
}, true);

演示

ps: 最近在寫gitchat 有點慢

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/96888.html

你不知道的javascript事件

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節(jié)點中包含了這兩個方法，它們都接受個參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個布爾值。事件流級事件規(guī)定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。事件流描述的是從頁面中接受事件的順序。然而ie和netscape分別提出了完全相反的的概念：事件冒泡和事件捕獲。下面就說說這兩種事件流：事件冒泡事件冒泡，就是說...

imtianx 2019-08-21 17:40 評論0 收藏0
你不知道的javascript事件

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節(jié)點中包含了這兩個方法，它們都接受個參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個布爾值。事件流級事件規(guī)定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。事件流描述的是從頁面中接受事件的順序。然而ie和netscape分別提出了完全相反的的概念：事件冒泡和事件捕獲。下面就說說這兩種事件流：事件冒泡事件冒泡，就是說...

marek 2019-08-01 18:00 評論0 收藏0
瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解

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

mylxsw 2019-08-21 10:38 評論0 收藏0
JavaScript捕獲和冒泡探討

摘要：上個星期在微博中一個關于捕獲和冒泡代碼的討論，可能沒有動手實現(xiàn)一篇的人無法給出確定的答案。目標階段事件對象到達其事件目標。在此階段注冊的事件監(jiān)聽器會對相應的冒泡事件進行處理。上個星期在微博中一個關于javascript捕獲和冒泡代碼的討論，可能沒有動手實現(xiàn)一篇的人無法給出確定的答案。這里再來回顧一下之前的三條微博。事件的執(zhí)行順序 JavaScript冒泡和捕獲考察題目看圖回答問題...

caikeal 2019-08-19 18:09 評論0 收藏0
JS專題之事件模型

摘要：三事件流規(guī)定事件包括三個階段，事件捕獲，處于目標階段事件冒泡。一起來看添加新增加的，點擊發(fā)現(xiàn)沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。本文共 1960 字，讀完只需 8 分鐘事件用戶與網(wǎng)頁交互是通過事件實現(xiàn)的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統(tǒng)一的規(guī)范，直到 DOM2 級，網(wǎng)景和 I...

W4n9Hu1 2019-08-26 13:24 評論0 收藏0