媒介
在温习事宜这块的时刻，发现了一个题目，网上许多文章对事宜阻挠这块剖析的并不周全，而且有些文章也有毛病的地方，因而想本身总结一下，也轻易本身的温习。
学问预热
事宜冒泡和捕捉
在看本篇文章之前，须要相识事宜的冒泡和捕捉，这里简朴引见下
事宜冒泡： 即事宜开始时由最详细的元素(文档中嵌套层数最深的谁人点)吸收，然后逐级向上流传到较为不详细的节点(文档)，可理解为：
由div->body->html->document
事宜捕捉：不太详细的节点应当更早吸收到事宜，而最详细的节点应当末了吸收到事宜，可理解为：
由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 falsereturn在函数中有三个作用：
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>本次考证所监听的事宜是
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()具有阻挠雷同事宜的其他侦听器被挪用的结果，所以这里不会实行
});