归纳DOM事件中各种阻止方法
前言
在復習事件這塊的時候，發現了一個問題，網上很多文章對事件阻止這塊解析的并不全面，并且有些文章也有錯誤之處，于是想自己總結一下，也方便自己的復習。
知識預熱
事件冒泡和捕獲
在看本篇文章之前，需要了解事件的冒泡和捕獲，這里簡單介紹下
事件冒泡： 即事件開始時由最具體的元素(文檔中嵌套層數最深的那個點)接收，然后逐級向上傳播到較為不具體的節點(文檔)，可理解為：
事件捕獲：不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件，可理解為：
由document->html->body->divDOM2級規定的事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段
dom事件綁定處理
與此同時，我們還需要了解dom事件綁定處理的幾種方式
①、HTML事件處理(在dom元素中嵌入)
<button onclick="fn()"></button> 缺點：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文件,寫入如下代碼
<html lang="en"> <head><meta charset="UTF-8"><title>阻止默認事件和冒泡</title><style>div{width: 300px; height: 300px; background-color: pink;}</style><script>// 接下來要寫的代碼</script> </head> <body> </body> </html>本次驗證所監聽的事件是
oncontextmenuoncontextmenu 事件在元素中用戶右擊鼠標時觸發并打開上下文菜單
由于一個個驗證比較麻煩，這里把所有的代碼都寫出來
第一個是針對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()，
這個方法除了阻止事件冒泡還可以阻止相同事件的其他偵聽器被調用。
看以下例子：
總結
以上是生活随笔為你收集整理的归纳DOM事件中各种阻止方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Tensorflow源码解析3 -- T
- 下一篇： 消息队列系列二（IOT中消息队列的应用）