摘要：看以下例子事件具有事件傳播的效果，所以這里不會(huì)執(zhí)行第個(gè)事件第個(gè)事件第個(gè)事件具有阻止相同事件的其他偵聽器被調(diào)用的效果，所以這里不會(huì)執(zhí)行

在復(fù)習(xí)事件這塊的時(shí)候，發(fā)現(xiàn)了一個(gè)問題，網(wǎng)上很多文章對(duì)事件阻止這塊解析的并不全面，并且有些文章也有錯(cuò)誤之處，于是想自己總結(jié)一下，也方便自己的復(fù)習(xí)。

在看本篇文章之前，需要了解事件的冒泡和捕獲，這里簡單介紹下
事件冒泡： 即事件開始時(shí)由最具體的元素(文檔中嵌套層數(shù)最深的那個(gè)點(diǎn))接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)(文檔)，可理解為：

由div->body->html->document 

事件捕獲：不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件，可理解為：

由document->html->body->div

DOM2級(jí)規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段

與此同時(shí)，我們還需要了解dom事件綁定處理的幾種方式

①、HTML事件處理(在dom元素中嵌入)

缺點(diǎn)： 
1、this指向window 
2、HTML與JS緊密耦合，改動(dòng)代碼麻煩

②、DOM0級(jí)事件處理(獲取dom元素直接綁定)

document.getElementById("btn").onclick = fn

優(yōu)點(diǎn)： 
1、this指向dom元素  
2、不存在瀏覽器兼容問題

③、DOM2級(jí)事件處理(事件監(jiān)聽)

document.getElementById("btn").addEventListener("click",fn)

優(yōu)點(diǎn)： this指向dom元素 
缺點(diǎn)： 1、需要對(duì)IE8及以下進(jìn)行兼容
document.getElementById("btn").attachEvent("click",fn)
由于IE8及以下只支持事件冒泡，所以通過attachEvent都會(huì)被添加到冒泡階段
IE中的attachEvent中的this總是指向全局對(duì)象Window

event.stopPropagation() 

作用： 終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播
兼容：在IE<9的瀏覽器上使用  event.cancelBubble = true

event.preventDefault() 

作用： 取消事件的默認(rèn)動(dòng)作
備注：只有cancelable屬性為true的事件，才可以使用preventDefault()
兼容：在IE瀏覽器中通過  e.returnValue = false

return false

return在函數(shù)中有三個(gè)作用： 
1、用來返回一些值，當(dāng)然也可以不寫返回值 
2、終止函數(shù)的執(zhí)行，就是說在return之后的代碼都不會(huì)執(zhí)行
3、在DOM0級(jí)事件中，可以像event.preventDefault() 取消默認(rèn)事件，但是在DOM2級(jí)則不行

event.stopImmediatePropagation()

作用： 阻止事件冒泡并且阻止相同事件的其他偵聽器被調(diào)用。
備注：阻止相同事件的其他偵聽器被調(diào)用指的是： 如果有多個(gè)相同類型事件的事件監(jiān)聽函數(shù)綁定到同一個(gè)元素，當(dāng)該類型的事件觸發(fā)時(shí)，它們會(huì)按照被添加的順序執(zhí)行。如果其中某個(gè)監(jiān)聽函數(shù)執(zhí)行了 event.stopImmediatePropagation() 方法，則當(dāng)前元素剩下的監(jiān)聽函數(shù)將不會(huì)被執(zhí)行。

接下來我們來驗(yàn)證一下，創(chuàng)建一個(gè)html文件,寫入如下代碼

本次驗(yàn)證所監(jiān)聽的事件是

oncontextmenu

oncontextmenu 事件在元素中用戶右擊鼠標(biāo)時(shí)觸發(fā)并打開上下文菜單

由于一個(gè)個(gè)驗(yàn)證比較麻煩，這里把所有的代碼都寫出來

第一個(gè)是針對(duì)DOM0級(jí)事件的JS代碼

document.querySelector("div").oncontextmenu = function(event){
    event.stopImmediatePropagation();   // 可以阻止事件傳播
    event.stopPropagation();            // 可以阻止事件傳播
    event.preventDefault();             // 可以阻止默認(rèn)事件
    return false;                       // 可以阻止默認(rèn)事件
    console.log("dom0-div");  
};
document.oncontextmenu = function(event){
    event.preventDefault();             // 可以阻止默認(rèn)事件
    return false;                       // 可以阻止默認(rèn)事件
    console.log("dom0-document"); 
};

第二個(gè)是針對(duì)DOM2級(jí)事件的JS代碼

document.querySelector("div").addEventListener("contextmenu", function(event){
    event.stopImmediatePropagation();   // 可以阻止事件傳播
    event.stopPropagation();            // 可以阻止事件傳播
    event.preventDefault();             // 可以阻止默認(rèn)事件
    // return false;                    // 不能阻止默認(rèn)事件
    console.log("dom2-div")
});
document.addEventListener("contextmenu", function(event){
    event.preventDefault();             // 可以阻止默認(rèn)事件
    // return false;                    // 不能阻止默認(rèn)事件
    console.log("dom2-document")
});

驗(yàn)證是否可以成功阻止事件傳播：
右擊div元素，控制臺(tái)查看是否有dom0-document 或者 dom2-document；
如果沒有，則阻止成功，如果有，則阻止失敗。
驗(yàn)證是否可以成功阻止默認(rèn)事件：
右擊鼠標(biāo)，看是否會(huì)出現(xiàn)菜單欄；
如果沒有，則阻止成功，如果有，則阻止失敗。

這里重點(diǎn)提一下 stopImmediatePropagation()，
這個(gè)方法除了阻止事件冒泡還可以阻止相同事件的其他偵聽器被調(diào)用。
看以下例子：

const div = document.querySelector("div");
        
document.addEventListener("click", (event) => {
    console.log("document事件");
    // event.stopImmediatePropagation()具有事件傳播的效果，所以這里不會(huì)執(zhí)行
});

div.addEventListener("click", (event) => {
    console.log("第1個(gè)事件");
});

div.addEventListener("click", (event) => {
    console.log("第2個(gè)事件");
    event.stopImmediatePropagation();
});

div.addEventListener("click", (event) => {
    console.log("第3個(gè)事件");
    // event.stopImmediatePropagation()具有阻止相同事件的其他偵聽器被調(diào)用的效果，所以這里不會(huì)執(zhí)行
});