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

更新日期: 2019-02-23阅读: 2.7k标签: 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()具有阻止相同事件的其他侦听器被调用的效果,所以这里不会执行
});

来自:https://segmentfault.com/a/1190000018254460


链接: https://www.fly63.com/article/detial/2095

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

浏览器中的JavaScript:文档对象模型与 DOM 操作

JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改 HTML 文档和交互。文档对象模型是在浏览器中一切的基础。但它究竟是什么呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!