JS事件addEventListener、on、元素属性事件触发的先后顺序

最新推荐文章于 2022-03-14 10:02:00 发布
原创 最新推荐文章于 2022-03-14 10:02:00 发布 · 752 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#事件

本文深入探讨了DOM事件、JS属性事件及JS监听事件之间的区别与联系，解析了不同事件处理方式的执行顺序和覆盖规则，为前端开发者提供了一个清晰的事件处理机制理解框架。

https://blog.youkuaiyun.com/bingoxing/article/details/82459497

dom 事件  <div onclick> <>

js 属性事件  div.onclick=

js 监听事件 addeventlinsener

总结： 

1.如果 dom 中写的有 事件  会先执行dom 中的事件 和 js 中 属性事件当然 会覆盖 ，在执行监听事件（addEventlisnter）

2.如果dom中没有事件，会按顺序执行

JavaScript事件触发的顺序和技巧
CsCufft的博客
09-28 559
同时，事件监听器和阻止事件冒泡是常见的处理事件的技巧，而事件委托则是一种优化技巧，可以减少内存消耗和事件处理函数的数量。在上面的代码中，当点击子元素时，事件不会继续冒泡到父元素，因为我们调用了event.stopPropagation()方法。在JavaScript中，事件触发的顺序可以分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件委托是一种常用的优化技巧，通过将事件监听器添加到父元素而不是每个子元素上，可以减少内存消耗和事件处理函数的数量。在这个阶段，事件从目标元素开始向上冒泡，直到达到文档的根节点。
JavaScript addEventListener()事件监听-事件流执行顺序
shuaishuaizhang8的博客
03-03 1278
addEventListener()事件监听-事件流执行顺序 事件冒泡或事件捕获？ HTML DOM中有两种事件传播方式，即冒泡和捕获。 事件传播是一种在事件发生时定义元素顺序的方法。 如果<div>元素中有<p>元素，并且用户单击<p>元素，应该首先处理哪个元素的“click”事件？ 在冒泡中，首先处理内部元素的事件，然后处理外部： 首先处理<p>元素的click事件，然后处理<div>元素的click事件。 在捕获最外层元素时，首先处理事件
addEventListener 事件响应顺序
weixin_33692284的博客
03-11 450
引自：http://www.cnblogs.com/chenlulouis/archive/2009/10/19/1585751.html target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串，事件名称，不含“on”，比如“cl...
addEventListener的执行顺序
summer199605的博客
09-07 3425
html文件 <html> <head> </head> <body> <div id="box1" style="height: 140;width : 140px;background-color:red "> box1 <div id="...
JS中onclick与addEventListener绑定事件的区别
极客园地
09-08 4828
onclick()这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chro...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
在JavaScript中，当你给一个元素添加事件监听器时，默认的行为是事件在冒泡阶段被触发。这意味着如果你同时在父元素和子元素上设置了相同类型的事件处理函数，当子元素的事件被触发时，首先执行的是子元素的函数，...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
事件执行顺序通常遵循“捕获-目标-冒泡”的规则，即事件首先在最外层元素（捕获阶段），然后到达目标元素，最后在目标元素及其所有祖先元素（冒泡阶段）触发事件处理。 理解这些基本概念后，可以有效地利用...
js 动态给元素添加、移除事件的实现方法
10-21
这意味着在事件处理程序内部，this关键字通常指向触发事件的元素，从而允许我们能够访问该元素的属性和方法。 总结来说，文章详细描述了JavaScript中动态添加和移除事件处理程序的方法，并指出了在不同浏览器之间...
原生js事件的添加和删除的封装
10-25
对于IE5等早期浏览器，只能通过直接赋值的方式，将事件处理函数赋给目标对象的on事件属性，例如将func赋给target.on(type)。 类似地，unbind函数用于移除事件监听器。它同样需要检测target对象支持的方法，并尝试...
JavaScript三种事件绑定的方法和执行顺序
sayUonly的博客
06-22 1793
JavaScript三种事件绑定的方法和执行顺序JavaScript的三种事件绑定方法HTML标签DOM事件addEventListener三种绑定事件的执行顺序 JavaScript的三种事件绑定方法 事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种： HTML标签 可以直接在HTML的标签上绑定事件，可以是直接的JavaS
对onload和addEvent执行顺序的分析
踏月流星
03-12 291
[size=small]1、测试过的浏览器有：火狐4、谷歌浏览器、ie6、ie7、ie8、ie9。 2、在以上任何一种浏览器中都会最先执行ready，这是因为ready在等页面的结构（即：dom）加载完成之后，就已经开始执行了，而另外两种方法，是要等页面中的所有内容（包括：图片和js等）下载完成之后，才会执行。 3、onload和addEvent在火狐4、谷歌和ie9中的执行顺序取决于：它们在...
listener的执行先后问题
adelath1991的博客
05-03 346
20121010日添加： franky教主(http://www.cnblogs.com/_franky/)说在IE各个版本下，attachEvent执行顺序是乱序的（这里是乱序，不是随机）。在我的环境下没有重现，我需要进一步验证下 问题提出： 　　问题一：如果一个element同时绑定了onclick，并且添加了click的listener。哪个最先执行呢？ 　　问题二：如...
关于浏览器里事件的捕获和冒泡及监听器执行的顺序
大概关于
08-27 1463
本文并不是一篇实用的文字，不考虑兼容性，而在于机制的理解。 关于本文的题目，不叫“js事件的捕获和冒泡”，是因为码者并不清楚这种叫法准不准确，于是用一个不那么精确的“浏览器”一词。 测试环境：Firefox Quantum 61.0.2 (64 位) 发现问题（场景） 下面n段代码的输出？ （代码一）基本的嵌套 &amp;lt;div onclick=&quot;outer()&quot;...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
weixin_39688170的博客
11-27 728
这篇文章主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料(一)事件绑定的几种方式javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。方式1：HTML的DOM元素支持oncli...
addEventListener绑定事件，立即触发问题
weixin_46547740的博客
03-14 1414
原来的写法 Node.addEventListener('click', twicePopup(1)); 更改后的写法 Node.addEventListener('click', function() { twicePopup(1) }); 缺少function（） {} 需要传递对twicePopup函数的引用
addEventListener和onclick的区别
weixin_56704277的博客
03-11 1662
onclick后面的事件会覆盖前面的事件，addEventListener会按事件的先后顺序执行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
js中监听注册事件addEventListener的使用
爬楼梯的前端小白的博客
01-25 1054
js中监听注册事件addEventListener的使用
总结：js中事件的5种使用方式
no_1back_up的博客
08-25 771
以下为onclick的使用技巧，全部经过个人验证，如要转载，请标明出处。 不限于onclick，所有事件都可以这样操作 事件如下： 第一种： 直接在标签中 οnclick="…"，里面写上修改标签属性的语句/输入输出语句 <button onclick="window.alert(window.prompt());this.innerText='9';this.style='background-color:red'">5</button> 开始 按下按钮 5，输入123
JavaScript事件流与事件处理详解
JavaScript中，事件处理通常通过事件处理函数实现，这包括事件监听器（addEventListener）和事件处理程序（on*属性）。addEventListener方法允许添加多个事件处理函数，同时提供了捕获和冒泡阶段的选择，而on*属性则...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值