当前位置: 首页 > news >正文

DOM 事件的注册和移除

前端面试大全·DOM 事件的注册和移除

🌟经典真题

🌟DOM 注册事件

HTML 元素中注册事件

DOM0 级方式注册事件

DOM2 级方式注册事件

🌟DOM 移除事件

🌟真题解答

🌟总结


🌟经典真题

  • 总结一下 DOM 中如何注册事件和移除事件

🌟DOM 注册事件

使用 JavaScript 为 DOM 元素注册事件的方式有多种。但是并不是一开始就设计了多种方式,而是随着技术的发展,发展前一种方式有所缺陷,所以设计了新的 DOM 元素注册事件的方式。

这里我们就一起来总结一下 DOM 中注册事件的方式有哪些。

HTML 元素中注册事件

HTML 元素中注册的事件,又被称之为行内事件监听器。这是在浏览器中处理事件最原始的方法。

具体的示例如下:

<button onclick="test('张三')">点击我</button>
function test(name) {console.log(`我知道你已经点击了,${name}`);
}

在上面的代码中,我们为 button 元素添加了 onclick 属性,然后绑定了一个名为 test 的事件处理器。

在 JavaScript 中只需要书写对应的 test 事件处理函数即可。

但是有一点需要注意,就是这种方法已经过时了,原因如下:

  • JavaScript 代码与 HTML 标记混杂在一起,破坏了结构和行为分离的理念。
  • 每个元素只能为每种事件类型绑定一个事件处理器。
  • 事件处理器的代码隐藏于标记中,很难找到事件是在哪里声明的。

但是如果是做简单的事件测试,那么这种写法还是非常方便快捷的。

DOM0 级方式注册事件

这种方式是首先取到要为其绑定事件的元素节点对象,然后给这些节点对象的事件处理属性赋值一个函数。

这样就可以达到 JavaScript 代码和 HTML 代码相分离的目的。

具体的示例如下:

<button id="test">点击我</button>
var test = document.getElementById("test");
test.onclick = function(){console.log("this is a test");
}

这种方式虽然相比 HTML 元素中注册事件有所改进,但是它也有一个缺点,那就是它依然存在每个元素只能绑定一个函数的局限性。

下面我们尝试使用这种方式为同一个元素节点绑定 2 个事件,如下:

var test = document.getElementById("test");
test.onclick = function(){console.log("this is a test");
}
test.onclick = function(){console.log("this is a test,too");
}

当我们为该 DOM 元素绑定 2 个相同类型的事件时,后面的事件处理函数就会把前面的事件处理函数给覆盖掉。

DOM2 级方式注册事件

DOM2 级再次对事件的绑定方式进行了改进。

DOM2 级通过 addEventListener 方法来为一个 DOM 元素添加多个事件处理函数。

该方法接收 3 个参数:事件名、事件处理函数、布尔值。

如果这个布尔值为 true,则在捕获阶段处理事件,如果为 false,则在冒泡阶段处理事件。若最后的布尔值不填写,则和 false 效果一样,也就是说默认为 false,在冒泡阶段进行事件的处理。

接下来我们来看下面的示例:这里我们为 button 元素绑定了 2 个事件处理程序,并且 2 个事件处理程序都是通过点击来触发。

var test = document.getElementById("test");
test.addEventListener("click", function () {console.log("this is a test");
}, false);
test.addEventListener("click", function () {console.log("this is a test,too");
}, false);

在上面的代码中,我们通过 addEventListener 为按钮绑定了 2 个点击的事件处理程序,2 个事件处理程序都会执行。

另外需要注意的是,在 IE 中和 addEventListener 方法与之对应的是 attachEvent 方法。

🌟DOM 移除事件

通过 DOM0 级来添加的事件,删除的方法很简单,只需要将 DOM 元素的事件处理属性赋值为 null 即可。

例如:

var test = document.getElementById("test");
test.onclick = function(){console.log("this is a test");test.onclick = null;
}

在上面的代码中,我们通过 DOM0 级的方式为 button 按钮绑定了点击事件,但是在事件处理函数中又移除了该事件。所以该事件只会生效一次。

如果是通过 DOM2 级来添加的事件,我们可以使用 removeEventLister 方法来进行事件的删除。

需要注意的是,如果要通过该方法移除某一类事件类型的一个事件的话,在通过 addEventListener 来绑定事件时的写法就要稍作改变。

先单独将绑定函数写好,然后 addEventListener 进行绑定时第 2 个参数传入要绑定的函数名即可。

示例如下:

var test = document.getElementById("test");
//DOM 2级添加事件
function fn1() {console.log("this is a test");test.removeEventListener("click", fn1); // 只删除第一个点击事件
}
function fn2() {console.log("this is a test,too");
}
test.addEventListener("click", fn1, false);
test.addEventListener("click", fn2, false);

在上面的代码中,我们为 button 元素绑定了两个 click 事件,之后在第一个事件处理函数中,对 fn1 事件处理函数进行了移除。所以第一次点击时,fn1 和 fn2 都会起作用,之后因为 fn1 被移除,所以只会 fn2 有作用。

🌟真题解答

  • 总结一下 DOM 中如何注册事件和移除事件

参考答案:

注册事件的方式常见的有 3 种方式:

  • HTML 元素中注册的事件:这种方式又被称之为行内事件监听器。这是在浏览器中处理事件最原始的方法。

  • DOM0 级方式注册事件:这种方式是首先取到要为其绑定事件的元素节点对象,然后给这些节点对象的事件处理属性赋值一个函数。

  • DOM2 级方式注册事件:DOM2 级通过 addEventListener 方法来为一个 DOM 元素添加多个事件处理函数。

    该方法接收 3 个参数:事件名、事件处理函数、布尔值。

    如果这个布尔值为 true,则在捕获阶段处理事件,如果为 false,则在冒泡阶段处理事件。若最后的布尔值不填写,则和 false 效果一样,也就是说默认为 false,在冒泡阶段进行事件的处理。

关于移除注册的事件,如果是 DOM0 级方式注册的事件,直接将值设置为 null 即可。如果是 DOM2 级注册的事件,可以使用 removeEventListener 方法来移除事件。

🌟总结

本篇文章是关于JavaScript的一道面试题,后续还会持续更新HTML、CSS、JavaScript、Node.js、Vue.js、网络等前端相关面试题。如果文中出现有瑕疵的地方各位通过评论或者私信联系我,我们一起进步,有兴趣的伙伴可以关注订阅: 前端面试题大全  

相关文章:

DOM 事件的注册和移除

前端面试大全DOM 事件的注册和移除 &#x1f31f;经典真题 &#x1f31f;DOM 注册事件 HTML 元素中注册事件 DOM0 级方式注册事件 DOM2 级方式注册事件 &#x1f31f;DOM 移除事件 &#x1f31f;真题解答 &#x1f31f;总结 &#x1f31f;经典真题 总结一下 DOM 中如何…...

挖漏洞之SQL注入

&#xff08;一&#xff09;漏洞原理 1、 漏洞原理 SQL注入的原理是&#xff0c;是应用系统没有对传递的参数进行过滤&#xff0c;让参数直接拼接到SQL语句中&#xff0c;攻击通过对参数进行篡改&#xff0c;当参数传递到数据库中&#xff0c;逻辑上就会发生变化&#xff0c;就…...

面试篇之微服务(二)

目录 服务容灾 21.什么是服务雪崩&#xff1f; 22.什么是服务熔断&#xff1f;什么是服务降级&#xff1f; 什么是服务熔断&#xff1f; 什么是服务降级&#xff1f; 有哪些熔断降级方案实现&#xff1f; 23.Hystrix怎么实现服务容错&#xff1f; 24.Sentinel怎么实现限…...

java封装详解

/*** Description 封装详解*/ package com.oop;import com.oop.demo04.Student; /*1.提高程序的安全性&#xff0c;保护数据2.隐藏代码的实现细节3.统一接口4.系统可维护增加了*/ public class Application {public static void main(String[] args) {Student s1 new Student(…...

Make sure bypassing Vue built-in sanitization is safe here.

一、问题描述 二、问题分析 XSS(跨站脚本攻击) XSS攻击通常指的是通过利用网页开发时留下的漏洞&#xff0c;通过巧妙的方法注入恶意指令代码到网页&#xff0c;使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript&#xff0c;但实际上也可以包括J…...

企业的内容站点SEO应该怎么做更有效果?

在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已成为企业内容站点不可或缺的一部分。通过优化网站的结构、内容和链接等方面&#xff0c;企业可以提高其在搜索引擎中的排名&#xff0c;吸引更多的潜在客户&#xff0c;并增加品牌曝光度。那么&#xff…...

mac电脑下载Netflix Mac(奈飞客户端)安装教程

Netflix Mac&#xff0c;奈飞官方客户端&#xff0c;带给您无限的电影和剧集体验&#xff01;与朋友分享最新热门剧集、电影&#xff0c;与家人一起享受高品质的流媒体内容。 通过Netflix Mac&#xff0c;您可以轻松地搜索、浏览和观看各种类型的影片&#xff0c;包括剧情片、…...

PCL 计算点云图中任意两点的欧式距离

目录 一、算法原理二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 使用PCL实现在可视化界面上用鼠标点选两个点,输出两点的坐标和两点之间的欧式距离。 二、代码…...

使用OssImport 工具将文件上传到阿里云OSS

前言 OssImport 工具由阿里云OSS 提供 使用 OssImport 将文件上传到阿里云OSS 参考这里 参考 使用OssImport 将阿里云服务器ECS上的文件上传到阿里云OSS ossimport概述 使用ossimport迁移数据...

充电桩新老国标兼容性分析

1、背景介绍 1.1、充电桩相关标准发展历程 1.2、兼容性分析历史 1.3、兼容性分析的目的 1.4、兼容性分析的内容 2、B类协议兼容性分析 2.1、协议分层结构 2.2、链路层分析 2.3、版本协商与链路检测 ## 2.4、传输层分析 2.5、应用层 2.5.1、应用层数据 2.5.2、应用层数据…...

ApiSix的docker 容器化部署及使用

⼀&#xff0e;etcd安装 Docekr安装Etcd 环境准备 此处安装&#xff0c;是利⽤下载的 etcd 源⽂件&#xff0c;利⽤ docker build 构建完整镜像&#xff0c;具体操作如下&#xff1a; 1.环境准备 1.1. 新建⽂件夹 在磁盘某个路径下新建⼀个⽂件夹&#xff0c;⽤处操作 Dockerfi…...

第十节HarmonyOS 使用资源引用类型

Resource是资源引用类型&#xff0c;用于设置组件属性的值。推荐大家优先使用Resource类型&#xff0c;将资源文件&#xff08;字符串、图片、音频等&#xff09;统一存放于resources目录下&#xff0c;便于开发者统一维护。同时系统可以根据当前配置加载合适的资源&#xff0c…...

ntopng如何将漏洞扫描与流量监控相结合,以提高网络安全性

来源&#xff1a;艾特保IT 虹科干货 | ntopng如何将漏洞扫描与流量监控相结合&#xff0c;以提高网络安全性 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; ntopng为人所知的“身份”是被动流量监控。然而&#xff0c;如今的ntopng6.0也进化出主动监控功能来&#xf…...

使用coco数据集进行语义分割(1):数据预处理,制作ground truth

如何coco数据集进行目标检测的介绍已经有很多了&#xff0c;但是关于语义分割几乎没有。本文旨在说明如何处理 stuff_train2017.json stuff_val2017.json panoptic_train2017.json panoptic_val2017.json&#xff0c;将上面那些json中的dict转化为图片的label mask&am…...

神经网络 模型表示2

神经网络 模型表示2 使用向量化的方法会使得计算更为简便。以上面的神经网络为例&#xff0c;试着计算第二层的值&#xff1a; 我们令 z ( 2 ) θ ( 1 ) x {{z}^{\left( 2 \right)}}{{\theta }^{\left( 1 \right)}}x z(2)θ(1)x&#xff0c;则 a ( 2 ) g ( z ( 2 ) ) {{a}…...

ubuntu使用SSH服务远程登录另一台设备

1、安装openssh-client和openssh-server 查看当前的ubuntu是否安装了ssh-server服务。默认只安装ssh-client服务。 dpkg -l | grep ssh查看有没有openssh-client的相关字眼。 2、安装ssh-server服务&#xff08;受控制方&#xff09; sudo apt-get install openssh-server再…...

读书笔记:《Effective Modern C++(C++14)》

Effective Modern C&#xff08;C14&#xff09; GitHub - CnTransGroup/EffectiveModernCppChinese: 《Effective Modern C》- 完成翻译 Deducing Types 模版类型推导&#xff1a; 引用&#xff0c;const&#xff0c;volatile被忽略数组名和函数名退化为指针通用引用&#…...

PCL 点云加权均值收缩

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 受到之前Matlab 加权均值质心计算(WMN)的启发,我们在计算每个点的加权质心时可以很容易的发现,他们这些点会受到周围邻近点密度的影响,最后会收缩到某一个区域,那么这个区域也必定是我们比较感兴趣的一些点,…...

计算机毕业设计 基于协同推荐的白酒销售管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

React-hook-form-mui(五):包含内嵌表单元素的表单

前言 在上一篇文章中&#xff0c;我们介绍了react-hook-form-mui如何与与后端数据联调。在实际项目中&#xff0c;从后端获取的数据可能是复杂的数据对象&#xff0c;本文将介绍&#xff0c;如何通过react-hook-form-mui实现一个包含内嵌表单元素的表单 Demo 以下代码实现了…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...