DOM（三）

最新推荐文章于 2023-12-20 09:22:27 发布
最新推荐文章于 2023-12-20 09:22:27 发布
阅读量74 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中DOM三级列表（代码分享）
10-20
本篇文章主要介绍了js中DOM实现三级列表的代码，具有很好的参考价值。下面跟着小编一起来看下吧
react，babel，react-dom三个包整合
09-05
react，babel，react-dom三个包的整合，实现react环境的搭建
removeEventListener取消事件监听的坑
热门推荐
huangfengnt的博客
05-31 2万+
记录一个坑
移除 JavaScript 中事件监听器的几种方法
VvpApplescript的博客
09-17 8339
在上面的代码中，我们首先定义了一个事件监听器 handleClick()，然后使用 addEventListener() 将它添加到 id 为 “myButton” 的按钮上。需要注意的是，如果我们直接在 removeEventListener() 中使用匿名函数，那么事件监听器将无法被正确移除。在上面的代码中，我们将事件监听器添加到父元素上，并在事件处理函数中检查事件目标是否是我们感兴趣的子元素。如果是，我们执行相应的操作。在这种情况下，移除事件监听器的方法稍有不同，我们需要在移除时使用相同的匿名函数。
事件监听与移除事件监听
cristina_song的博客
10-22 1万+
Navigator onLine 属性:一个只读的布尔值，声明了系统是否处于脱机模式。 addEventListener() 事件监听 emoveEventListener() 移除事件监听 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是...
删除事件（解绑事件）的方式
shhghvvh的博客
11-25 1895
【代码】删除事件（解绑事件）的方式。
[js] 删除绑定的事件 removeEventListener
qq_14993591的博客
09-08 7708
<div>我是div标签</div> var oDiv = document.querySelector('div'); // on语法绑定 oDiv.onclick = function(){console.log(1111)}; // 删除事件 赋值 空函数 oDiv.onclick = function(){}; // 事件监听语法 oDiv.addEvent
js中DOM三级列表（代码分享）.docx
01-21
js中DOM三级列表（代码分享）.docx
免费文档_android解析XML总结(SAX、Pull、Dom三种方式).pdf
11-14
免费文档_android解析XML总结(SAX、Pull、Dom三种方式).pdf
关于JS移除事件removeEventListener不起作用问题
inMe_xh的博客
04-15 8367
关于JS移除事件removeEventListener不起作用问题
js事件监听：addEventListener() 与 移除事件：removeEventListener()
日暮斜阳
09-20 1万+
说事件绑定得先说事件流 事件流 冒泡型事件流： 事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流： 事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 来个例子看一下吧！ <!DOCTYPE h...
js基础:addEventListener与removeEventListener使用时，涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
最新发布
qq_45796592的博客
12-20 1816
一文理解addEventListener与removeEventListener使用以及涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
js中删除事件removeEventListener的使用
爬楼梯的前端小白的博客
01-27 9119
js中删除事件removeEventListener的使用
前端removeEventListener 移除监听事件
coising的博客
04-06 1496
解决 removeEventListener 不生效问题
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 794
最近工作中在页面需要用到addEventListener [code="java"] document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); [/code] 但是有另外一个需求是需要将以上的'touchmove'恢复为默认的。开始我直接使用removeEventListene...
删除事件removeEventListener
CLhen的博客
06-30 533
删除事件removeEventListener
vue移除removeEventListener事件
qq_33490620的博客
11-30 2648
vue移除removeEventListener事件 首先假设我们在created或者mounted添加了一个监听事件，在beforeDestroy时移除 mounted() { window.addEventListener("click", this.clickFun) /* 这里需要注意一下，在vue里我们调用methods的方法经常使用的是this.clickFun(), 但是在这里不需要括号，这里不需要括号，这里不需要括号 */ }, beforeDestroy() { windo
js添加事件和移除事件:addEventListener()与removeEventListener()
Yutao_fullstack
01-27 945
另有js事件详解 &nbsp;点击打开链接 一.addEventListener()和removeEventListener()讲解 &nbsp; &nbsp; &nbsp;addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。 &nbsp; &nbsp; &nbsp;它们都接受3个参数：如 &nbsp; &nbsp;...
三层ul嵌套使用dom完成
06-08
以下是一个三层ul嵌套的DOM实现代码示例： ```html <!DOCTYPE html> 三层ul嵌套 ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 20px; position: relative; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值