事件冒泡和傳播

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

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

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

事件傳播和事件冒泡

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

DOM為一個(gè)完整的樹

使用事件傳播輸出hello world

html如下

 

  
      
      
    Hello world
  
  
    
        
            點(diǎn)擊這里

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");

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

當(dāng)為false的時(shí)候?yàn)槊芭荨７駝t為事件傳播

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

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

阻止進(jìn)一步冒泡

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

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

js如上，在div2內(nèi)部使用event.stopPropagation()阻止進(jìn)一步冒泡
結(jié)果如下

可以看到明顯的被阻擋

傳播

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

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

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

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

js如下

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

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

演示

ps: 最近在寫gitchat 有點(diǎn)慢