DOM（三）

最新推荐文章于 2024-06-01 09:55:20 发布
最新推荐文章于 2024-06-01 09:55:20 发布
阅读量83 收藏
点赞数
分类专栏： js学习
原文链接：https://blog.csdn.net/llXlI/article/details/116067005
版权

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容
HTML绑定
在这里插入图片描述
JS绑定
在这里插入图片描述
在这里插入图片描述
JS绑定事件时，不能加()，否则会在页面加载时立即执行
可以绑定匿名函数

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

addEventListener()
在这里插入图片描述在这里插入图片描述
removeEventListener()
在这里插入图片描述
无法移除匿名添加的函数

DOM0级事件和DOM2级事件区别

DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖
在这里插入图片描述
在这里插入图片描述DOM2级事件只能可以绑定多个函数，且有执行顺序
在这里插入图片描述
DOM0级事件与DOM2级事件互不影响
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

事件传参

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
event为默认参数，不需传入即可调用，该对象表示触发的事件本身
event.target会返回触发该事件的目标元素

在这里插入图片描述
在这里插入图片描述
行内调用时，传入this，this代表该元素本身

在这里插入图片描述

常用事件

在这里插入图片描述

Chtide
关注
专栏目录
removeEventListener取消事件监听的坑
huangfengnt的博客
05-31 2万+
记录一个坑
移除 JavaScript 中事件监听器的几种方法
VvpApplescript的博客
09-17 1万+
在上面的代码中，我们首先定义了一个事件监听器 handleClick()，然后使用 addEventListener() 将它添加到 id 为 “myButton” 的按钮上。需要注意的是，如果我们直接在 removeEventListener() 中使用匿名函数，那么事件监听器将无法被正确移除。在上面的代码中，我们将事件监听器添加到父元素上，并在事件处理函数中检查事件目标是否是我们感兴趣的子元素。如果是，我们执行相应的操作。在这种情况下，移除事件监听器的方法稍有不同，我们需要在移除时使用相同的匿名函数。
事件监听与移除事件监听
cristina_song的博客
10-22 1万+
Navigator onLine 属性:一个只读的布尔值，声明了系统是否处于脱机模式。 addEventListener() 事件监听 emoveEventListener() 移除事件监听 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是...
删除事件（解绑事件）的方式
shhghvvh的博客
11-25 1932
【代码】删除事件（解绑事件）的方式。
[js] 删除绑定的事件 removeEventListener
qq_14993591的博客
09-08 7751
<div>我是div标签</div> var oDiv = document.querySelector('div'); // on语法绑定 oDiv.onclick = function(){console.log(1111)}; // 删除事件 赋值 空函数 oDiv.onclick = function(){}; // 事件监听语法 oDiv.addEvent
js中DOM三级列表（代码分享）
12-29
效果图： 代码如下： ... /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[ {id:10,name:'男装',children:[ {id:101,name:'正装'}, {id:102,name:'T恤'}, {id:103,name:'裤衩'} ]}, {i
js中DOM三级列表（代码分享）.docx
01-21
本篇文章重点讲述了如何利用JavaScript DOM操作来实现一个三级联动的列表，这种列表常用于导航菜单或者分类选择。下面我们将详细讨论相关知识点。 首先，我们看到代码中定义了一个名为`categories`的数组，它包含了...
react，babel，react-dom三个包整合
09-05
下面将详细阐述这三个包的作用以及如何将它们整合到一起，实现React开发环境的搭建。 React是Facebook推出的一个用于构建用户界面的库，其核心理念是将UI分解为独立、可复用的组件。每个组件都有自己的状态和属性，...
android解析XML总结（SAX、Pull、Dom三种方式)
11-01
本文将深入探讨三种在Android中解析XML的主要方法：SAX（Simple API for XML）、Pull解析器和DOM（Document Object Model），并结合代码实现进行详细阐述。 **1. SAX解析** SAX（Simple API for XML）是一种事件...
关于JS移除事件removeEventListener不起作用问题
inMe_xh的博客
04-15 8482
关于JS移除事件removeEventListener不起作用问题
js基础:addEventListener与removeEventListener使用时，涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
qq_45796592的博客
12-20 2131
一文理解addEventListener与removeEventListener使用以及涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
js事件监听：addEventListener() 与 移除事件：removeEventListener()
热门推荐
日暮斜阳
09-20 1万+
说事件绑定得先说事件流 事件流 冒泡型事件流： 事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流： 事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 来个例子看一下吧！ <!DOCTYPE h...
js中删除事件removeEventListener的使用
爬楼梯的前端小白的博客
01-27 9179
js中删除事件removeEventListener的使用
前端removeEventListener 移除监听事件
coising的博客
04-06 1661
解决 removeEventListener 不生效问题
JavaScript移除事件的方法
最新发布
猿码互联
06-01 1060
这两种方法都可以用于移除事件，但建议使用removeEventListener方法，因为它提供了更精确的控制，并且可以移除通过addEventListener方法添加的任何事件处理函数。而onclick=null方法只能移除通过DOM属性添加的事件处理函数。它需要传入三个参数：事件类型、事件处理函数和一个可选的布尔值来指定事件是否在捕获阶段触发。在DOM中，可以将一个事件处理函数直接设置为null来移除事件。这种方法只适用于内联事件处理函数或通过DOM属性添加的事件处理函数。
JS .removeEventListener( ) 移除由 addEventListener() 方法添加的事件句柄 (解除事件监听)
weixin_41796631的博客
10-09 1万+
语法： element.removeEventListener(event, myFunction) 注意：兼容： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄: element.attachEv...
removeEventListener使用
xiaoyayadaya的博客
12-30 822
最近工作中在页面需要用到addEventListener [code="java"] document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); [/code] 但是有另外一个需求是需要将以上的'touchmove'恢复为默认的。开始我直接使用removeEventListene...
删除事件removeEventListener
CLhen的博客
06-30 547
删除事件removeEventListener
vue移除removeEventListener事件
qq_33490620的博客
11-30 2706
vue移除removeEventListener事件 首先假设我们在created或者mounted添加了一个监听事件，在beforeDestroy时移除 mounted() { window.addEventListener("click", this.clickFun) /* 这里需要注意一下，在vue里我们调用methods的方法经常使用的是this.clickFun(), 但是在这里不需要括号，这里不需要括号，这里不需要括号 */ }, beforeDestroy() { windo
云盖山矿井水DOM三维荧光光谱特性分析
"该文基于云盖山一矿的矿井水样本，通过三维荧光光谱技术，对溶解性有机物（DOM）的特性进行了深入研究。结果显示，矿井水中的DOC（溶解有机碳）浓度变化较小，但在石门矿井水中，UV254吸收值显著高于其他样本。所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值