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

xioqua 发布于2019-08-23 15:24 / 2364人阅读

摘要：看以下例子事件具有事件传播的效果，所以这里不会执行第个事件第个事件第个事件具有阻止相同事件的其他侦听器被调用的效果，所以这里不会执行

前言

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

知识预热 事件冒泡和捕获

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

由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阻止默认点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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