归纳DOM事件中各种阻止方法

前言

在复习事件这块的时候，发现了一个问题，网上很多文章对事件阻止这块解析的并不全面，并且有些文章也有错误之处，于是想自己总结一下，也方便自己的复习。

知识预热

事件冒泡和捕获

在看本篇文章之前，需要了解事件的冒泡和捕获，这里简单介绍下
事件冒泡： 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收，然后逐级向上传播到较为不具体的节点(文档)，可理解为：

由div->body->html->document

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，可理解为：

由document->html->body->div

DOM2级规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

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>

本次验证所监听的事件是

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()具有阻止相同事件的其他侦听器被调用的效果，所以这里不会执行
});

归纳DOM事件中各种阻止方法

前言

知识预热

事件冒泡和捕获

dom事件绑定处理

方法详解

stopPropagation()

preventDefault()

return false

stopImmediatePropagation()

验证方法

magic_xiang

引用和评论

web3小白入门：区块链的了解

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具