DOM编程（三）

最新推荐文章于 2023-12-20 09:22:27 发布
最新推荐文章于 2023-12-20 09:22:27 发布
阅读量100 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55655463/article/details/116431909
版权

DOM编程（三）

DOM事件绑定

DOM0级别事件绑定

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

DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序
addEventListener()
在这里插入图片描述
在这里插入图片描述
第一个参数为事件名，不加on
第二个参数为函数名，不加引号
第二个参数为函数名，不加括号(）
可以绑定匿名函数
removeEventListener()
在这里插入图片描述
无法移除匿名添加的函数

DOM0级事件和DOM2级事件的区别

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

  1. 捕获事件阶段
  2. 处于目标阶段
  3. 事件冒泡阶段
    可通过第三个可选参数控制事件流

事件传参

在这里插入图片描述在这里插入图片描述
无法绑定成功，加括号会直接执行
在这里插入图片描述
行内绑定，注意加引号
在这里插入图片描述
使用匿名函数
在这里插入图片描述
event为默认参数，不需传入即可调用，该对象表示触发的事件本身
event.target会返回触发该事件的目标元素
在这里插入图片描述
在这里插入图片描述
行内调用时，传入this，this代表该元素本身
在这里插入图片描述
在这里插入图片描述

常用事件

在这里插入图片描述

练习
分别尝试以上事件
用户在输入框内输入任意字符，每输入一个字符，下方出现输入的字符
按下Enter键后，弹出alert框，显示用户输入(提示：可通过event.code判断用户按下的按键)
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
从互联网上下载任意大于500*500的图片，在页面上显示图片，宽度设置为200；
当鼠标移入该图片时，出现该图片的放大图（宽度500），并且跟随鼠标移动
当鼠标移出时，消除放大图片
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

~Pitaya~569
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
javascriptDom编程艺术
07-22
资源名称：javaｓｃｒｉｐｔ Dom 编程艺术   资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
removeEventListener取消事件监听的坑
热门推荐
huangfengnt的博客
05-31 2万+
记录一个坑
移除 JavaScript 中事件监听器的几种方法
VvpApplescript的博客
09-17 9134
在上面的代码中，我们首先定义了一个事件监听器 handleClick()，然后使用 addEventListener() 将它添加到 id 为 “myButton” 的按钮上。需要注意的是，如果我们直接在 removeEventListener() 中使用匿名函数，那么事件监听器将无法被正确移除。在上面的代码中，我们将事件监听器添加到父元素上，并在事件处理函数中检查事件目标是否是我们感兴趣的子元素。如果是，我们执行相应的操作。在这种情况下，移除事件监听器的方法稍有不同，我们需要在移除时使用相同的匿名函数。
事件监听与移除事件监听
cristina_song的博客
10-22 1万+
Navigator onLine 属性:一个只读的布尔值，声明了系统是否处于脱机模式。 addEventListener() 事件监听 emoveEventListener() 移除事件监听 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是...
删除事件（解绑事件）的方式
shhghvvh的博客
11-25 1899
【代码】删除事件（解绑事件）的方式。
[js] 删除绑定的事件 removeEventListener
qq_14993591的博客
09-08 7730
<div>我是div标签</div> var oDiv = document.querySelector('div'); // on语法绑定 oDiv.onclick = function(){console.log(1111)}; // 删除事件 赋值 空函数 oDiv.onclick = function(){}; // 事件监听语法 oDiv.addEvent
DOM 高级编程
09-03
主要介绍了DOM 高级编程,需要的朋友可以参考下
dom编程学习笔记.pdf
11-15
dom编程学习笔记.pdf
JavaScript+DOM编程艺术（清晰中文版）.pdf
08-29
一本我喜欢的书
关于JS移除事件removeEventListener不起作用问题
inMe_xh的博客
04-15 8414
关于JS移除事件removeEventListener不起作用问题
js事件监听：addEventListener() 与 移除事件：removeEventListener()
日暮斜阳
09-20 1万+
说事件绑定得先说事件流 事件流 冒泡型事件流： 事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流： 事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 来个例子看一下吧！ <!DOCTYPE h...
js基础:addEventListener与removeEventListener使用时，涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
最新发布
qq_45796592的博客
12-20 1980
一文理解addEventListener与removeEventListener使用以及涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
js中删除事件removeEventListener的使用
爬楼梯的前端小白的博客
01-27 9145
js中删除事件removeEventListener的使用
前端removeEventListener 移除监听事件
coising的博客
04-06 1538
解决 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 802
最近工作中在页面需要用到addEventListener [code="java"] document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); [/code] 但是有另外一个需求是需要将以上的'touchmove'恢复为默认的。开始我直接使用removeEventListene...
删除事件removeEventListener
CLhen的博客
06-30 537
删除事件removeEventListener
vue移除removeEventListener事件
qq_33490620的博客
11-30 2660
vue移除removeEventListener事件 首先假设我们在created或者mounted添加了一个监听事件，在beforeDestroy时移除 mounted() { window.addEventListener("click", this.clickFun) /* 这里需要注意一下，在vue里我们调用methods的方法经常使用的是this.clickFun(), 但是在这里不需要括号，这里不需要括号，这里不需要括号 */ }, beforeDestroy() { windo
XML-DOM编程模型简单参考手册.doc
11-29
XML-DOM编程模型简单参考手册.doc是一种应用在Web浏览器中的技术，它使用文档对象模型（DOM）来访问和操作浏览器的窗口、文档和历史等对象。然而，不同的浏览器对这些对象的访问和操作方式各不相同。为了达到更加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值