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、网络等前端相关面试题。如果文中出现有瑕疵的地方各位通过评论或者私信联系我,我们一起进步,有兴趣的伙伴可以关注订阅: 前端面试题大全  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/192073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP连接为什么是三次握手,而不是两次和四次

答案 阻止重复的历史连接同步初始序列号避免资源浪费 原因 阻止重复的历史连接&#xff08;首要原因&#xff09; 考虑这样一种情况&#xff1a; 客户端现在要给服务端建立连接&#xff0c;向服务端发送了一个SYN报文段&#xff08;第一次握手&#xff09;&#xff0c;以表示请…

固定Microsoft Edge浏览器的位置设置,避免自动回调至中国

问题描述 在使用Copilot等功能时&#xff0c;需要将Microsoft Edge浏览器的位置设置为国外。但每次重新打开浏览器后&#xff0c;位置设置又自动回调至中国&#xff0c;导致每次均需要手动调整。 原因分析 这个问题的出现是因为每次启动Microsoft Edge时&#xff0c;默认打开…

cmake和vscode 下的cmake的使用详解(三)

第七讲&#xff1a;【实战】使用 VSCode 进行完整项目开发 案例&#xff1a;士兵突击 需求&#xff1a; 1. 士兵 许三多 有一把 枪 &#xff0c;叫做 AK47 2. 士兵 可以 开火 3. 士兵 可以 给枪装填子弹 4. 枪 能够 发射 子弹 5. 枪 能够 装填子弹 ——…

2022年9月6日 Go生态洞察:Go的漏洞管理新支持

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

docker-速通

1.命令-镜像操作 docker pull nginx #下载最新版 docker pull nginx:1.20.1 #下载指定版本 镜像名:版本名&#xff08;标签&#xff09; docker images #查看所有镜像 # 如果只写镜像名实际就是redis redis:latest 记住这个不是命令 docker rmi 镜像名:版本号/镜像id…

利用段落检索和生成模型进行开放域问答12.2

利用段落检索和生成模型进行开放域问答 摘要引言2 相关工作3 方法 摘要 事实证明&#xff0c;开放域问答的生成模型具有竞争力&#xff0c;无需借助外部知识。虽然很有希望&#xff0c;但这种方法需要使用具有数十亿个参数的模型&#xff0c;而这些模型的训练和查询成本很高。…

在linux服上部署vue+springboot+nginx项目

一、环境准备 1、安装winscp便于可视化操作linux&#xff1a;winscp安装及关联putty使用_putty.exe没有找到_cherishSpring的博客-CSDN博客 2、安装jdk&#xff1a;linux系统安装jdk-CSDN博客 3、安装mysql&#xff1a;Linux7安装mysql数据库以及navicat远程连接mysql-CSDN博…

Fiddler抓包工具之fiddler设置断点和简单的并发测试

断点有两种方式&#xff1a; 1、全局断点 2、局部断点 全局断点 全局断点的特点是&#xff1a;不能针对一个请求&#xff0c;是给所有抓到的请求打断点 全局断点如何设置&#xff1a; 1、快速设置断点&#xff1a;直接点击底部状态栏断点处 &#xff1b;点击第一下是请求…

【算法专题】二分查找

二分查找 二分查找1. 二分查找2. 在排序数组中查找元素的第一和最后一个位置3. 搜索插入位置4. x 的平方根5. 山脉数组的峰顶索引6. 寻找峰值7. 寻找旋转排序数组中的最小值8. 点名 二分查找 1. 二分查找 题目链接 -> Leetcode -704.二分查找 Leetcode -704.二分查找 题…

【Geoserver】SLD点位样式(PointSymbolizer)设计全通

SLD文件可以控制geoserver的样式管理&#xff0c;这里专门针对点位进行设计&#xff0c;首先点位的设计需要用到这面这个大标签 之前的项目中已经用到了很多关于面的样式管理&#xff0c;这里新学习的是关于点的样式管理 PointSymbolizer 参考资料地址&#xff1a;https://doc…

LeetCode算法题解(动态规划)|LeetCode1143. 最长公共子序列、LeetCode1035. 不相交的线、LeetCode53. 最大子数组和

一、LeetCode1143. 最长公共子序列 题目链接&#xff1a;1143. 最长公共子序列 题目描述&#xff1a; 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一…

论文编写软件latex安装教程

目录 1.下载安装包2.安装texlive 本人系统为windows&#xff0c;本教程基于windows系统&#xff0c;如果是其它系统请参考对应教程&#xff0c;注意选择对应系统的安装包&#xff01; 1.下载安装包 有三种集成环境安装包 texlive 是主流的环境&#xff0c;集成了较多的包&…

【数据结构】二叉树---C语言版

二叉树 一、树的概念及结构1.树的概念2.树的相关概念3.树的表示4.树在实际中的应用 二、二叉树的概念及结构1.二叉树的概念2.满二叉树3.完全二叉树4.二叉树的性质5.二叉树的储存结构 三、二叉树的遍历1.前序遍历2.中序遍历3.后序遍历4.层序遍历 四、手撕二叉树&#xff08;务必…

MySQL 临时数据空间不足导致SQL被killed 的问题与扩展

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;共1730人左右 1 2 3 4 5&#xff0…

Mover Creator--功能简介

Mover Creator是一款AFSIM软件工具&#xff0c;提供方便易用的基于GUI的应用程序&#xff0c;帮助用户创建用于空中运动器的AFSIM输入文件&#xff0c;包括WSF_P6DOF_MOVER和WSF_GUIDED_MOVER。使用自定义定义的基于图形的模型定义&#xff0c;用户可以对飞机、武器和发动机进行…

邮政快递查询,邮政快递单号查询,用表格导出查询好的物流信息

批量查询邮政快递单号的物流信息&#xff0c;并以表格的形式导出查询好的物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 邮政快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册&am…

linux后端基础---笔记整理(tmux、vim、shell、ssh/scp、git、thrift、docker)

目录 1.Linux常用文件管理命令 2.tmux终端复用器/vim命令式文本编辑器 3.Shell语法 3.1 Shell—版本3.2 新建一个test.sh文件3.3 Shell文件—运行方式3.4 Shell—注释3.5 Shell—变量3.6 Shell—默认变量&#xff0c;文件参数, “$”的用法3.7 Shell—数组3.8 shell—expr命令…

AD7124-4 实测热电偶数据读取,电压精度到稳定到±1uV, 电压波动260nV, 温度精度到±0.01℃

AD7124-4 实测热电偶数据读取&#xff0c;电压精度到稳定到1uV, 电压波动260nV, 温度精度到0.01℃ AD7124_STM32_ADI官网例程使用stm32 和ad7124做温控调试&#xff0c;发现效果还是不错的&#xff0c;至少比ads1256的效果好多啦&#xff01;Chapter1 AD7124-4 实测热电偶数据读…

Halcon tiff 点云读取以及平面矫正

一、读取tiff 图 dev_close_window () dev_open_window (0, 0, 512, 512, black, WindowHandle)xResolution:0.0025 yResolution:0.0025 zResolution:0.001 read_image (IntputImage, C:/Users/alber/Desktop/2023-08-15_16-38-24-982_/Sta5_002.tif) zoom_image_factor (Intpu…

初创公司的技术 SEO:提示和最佳实践

初创公司总是寻求可以在几乎没有前期资金的情况下进行扩展的增长战略。搜索引擎优化就是这样一种方法。 如果操作得当&#xff0c;SEO可以产生越来越多的目标访问者&#xff0c;而无需额外费用。此外&#xff0c;它可以通过支持其他策略来影响整个营销漏斗。你已经找到了学习初…