歸納DOM事件中各種阻止方法

xioqua 發布于2019-08-23 15:24 / 2362人閱讀

摘要：看以下例子事件具有事件傳播的效果，所以這里不會執行第個事件第個事件第個事件具有阻止相同事件的其他偵聽器被調用的效果，所以這里不會執行

前言

在復習事件這塊的時候，發現了一個問題，網上很多文章對事件阻止這塊解析的并不全面，并且有些文章也有錯誤之處，于是想自己總結一下，也方便自己的復習。

知識預熱 事件冒泡和捕獲

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

由div->body->html->document

事件捕獲：不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件，可理解為：

由document->html->body->div

DOM2級規定的事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段

dom事件綁定處理

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

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

缺點： 
1、this指向window 
2、HTML與JS緊密耦合，改動代碼麻煩

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

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

優點： 
1、this指向dom元素  
2、不存在瀏覽器兼容問題

③、DOM2級事件處理(事件監聽)

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

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

方法詳解 stopPropagation()

event.stopPropagation()

作用：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播

兼容：在IE<9的瀏覽器上使用 event.cancelBubble = true

preventDefault()

event.preventDefault()

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

return false

return false

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

stopImmediatePropagation()

event.stopImmediatePropagation()

作用：阻止事件冒泡并且阻止相同事件的其他偵聽器被調用。

備注：阻止相同事件的其他偵聽器被調用指的是：如果有多個相同類型事件的事件監聽函數綁定到同一個元素，當該類型的事件觸發時，它們會按照被添加的順序執行。如果其中某個監聽函數執行了 event.stopImmediatePropagation() 方法，則當前元素剩下的監聽函數將不會被執行。

驗證方法

接下來我們來驗證一下，創建一個html文件,寫入如下代碼



    
    阻止默認事件和冒泡

本次驗證所監聽的事件是

oncontextmenu

oncontextmenu 事件在元素中用戶右擊鼠標時觸發并打開上下文菜單

由于一個個驗證比較麻煩，這里把所有的代碼都寫出來

第一個是針對DOM0級事件的JS代碼

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

第二個是針對DOM2級事件的JS代碼

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

驗證是否可以成功阻止事件傳播：
右擊div元素，控制臺查看是否有dom0-document 或者 dom2-document；
如果沒有，則阻止成功，如果有，則阻止失敗。
驗證是否可以成功阻止默認事件：
右擊鼠標，看是否會出現菜單欄；
如果沒有，則阻止成功，如果有，則阻止失敗。

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

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

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

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

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

GPU云服務器云服務器阻止冒泡事件阻止事件傳播 js阻止冒泡事件 js阻止默認點擊事件

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

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

Object of Event-Professional JavaScript for Web De

在Nicholas C.Zakas《Professional JavaScript for Web Developer》一書中，對于解決event對象兼容性問題進行了歸納封裝。優點：無需過多考慮不同瀏覽器對event對象的差異，統一采用DOM標準調用event對象的方法和屬性跨平臺的事件 1-創建Eventutil對象（工具包） var Eventutil=new Object(); ...

104828720 2019-08-21 12:21 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 評論0 收藏0
DOM 事件詳解

摘要：與此同時，我們獲得了回調函數的句柄，從而可以隨時從元素上移除相應的事件監聽。對象會被作為第一個參數傳遞給事件監聽的回調函數。 Click、touch、load、drag、change、input、error、risize — 這些都是冗長的DOM（文檔對象模型）事件列表的一部分。事件可以在文檔(Document)結構的任何部分被觸發，觸發者可以是用戶操作，也可以是瀏覽器本身。事件并不是...

tianhang 2019-08-19 14:24 評論0 收藏0