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

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

在看本篇文章之前，需要了解事件的冒泡和捕獲，這裡簡單介紹下

事件冒泡：即事件開始時由最具體的元素(文件中巢狀層數最深的那個點)接收，然後逐級向上傳播到較為不具體的節點(文件)，可理解為：

由div->body->html->document

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

由document->html->body->div

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

與此同時，我們還需要了解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

event.stoppropagation()

作用：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播相容：在ie<9的瀏覽器上使用event.cancelbubble = true

event.preventdefault()

作用：取消事件的預設動作

備註：只有cancelable屬性為true的事件，才可以使用preventdefault()

相容：在ie瀏覽器中通過e.returnvalue = false

return false

return在函式中有三個作用：

1、用來返回一些值，當然也可以不寫返回值

2、終止函式的執行，就是說在return之後的**都不會執行

3、在dom0級事件中，可以像event.preventdefault() 取消預設事件，但是在dom2級則不行

event.stopimmediatepropagation()

作用：阻止事件冒泡並且阻止相同事件的其他偵聽器被呼叫。備註：阻止相同事件的其他偵聽器被呼叫指的是：如果有多個相同型別事件的事件監聽函式繫結到同乙個元素，當該型別的事件觸發時，它們會按照被新增的順序執行。如果其中某個監聽函式執行了 event.stopimmediatepropagation() 方法，則當前元素剩下的監聽函式將不會被執行。

接下來我們來驗證一下，建立乙個html檔案,寫入如下**

本次驗證所監聽的事件是

oncontextmenu

oncontextmenu 事件在元素中使用者右擊滑鼠時觸發並開啟上下文選單

由於乙個個驗證比較麻煩，這裡把所有的**都寫出來

第乙個是針對dom0級事件的js**

document.queryselector("div").oncontextmenu = function(event);
document.oncontextmenu = function(event);

第二個是針對dom2級事件的js**

document.queryselector("div").addeventlistener('contextmenu', function(event));
document.addeventlistener('contextmenu', function(event));

驗證是否可以成功阻止事件傳播：

右擊div元素，控制台檢視是否有dom0-document 或者 dom2-document；

如果沒有，則阻止成功，如果有，則阻止失敗。

驗證是否可以成功阻止預設事件：

右擊滑鼠，看是否會出現選單欄；

如果沒有，則阻止成功，如果有，則阻止失敗。

這裡重點提一下stopimmediatepropagation()，

這個方法除了阻止事件冒泡還可以阻止相同事件的其他偵聽器被呼叫。

看以下例子：

const div = document.queryselector('div');
document.addeventlistener("click", (event) => );
div.addeventlistener("click", (event) => );
div.addeventlistener("click", (event) => );
div.addeventlistener("click", (event) => );

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

在複習事件這塊的時候，發現了乙個問題，網上很多文章對事件阻止這塊解析的並不全面，並且有些文章也有錯誤之處，於是想自己總結一下，也方便自己的複習。在看本篇文章之前，需要了解事件的冒泡和捕獲，這裡簡單介紹下事件冒泡即事件開始時由最具體的元素文件中巢狀層數最深的那個點接收，然後逐級向上傳播到較為不...

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

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

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

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

相關推薦