JS中onclick与addEventListener绑定事件的区别

最新推荐文章于 2024-04-15 19:31:06 发布
最新推荐文章于 2024-04-15 19:31:06 发布
阅读量929 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sadmoom/article/details/51440181
版权

  • onclick这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有一些弊端：

  1. 这种写法不能同时绑定多个事件

  2. 这种写法使代码耦合在了一起

  • addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序（由这个函数的第三个参数决定true/false），既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera都支持这个）。

  • 例如你这么写
xxx.onclick = method1; 
xxx.onclick = method2; 
xxx.onclick = method3;
如果这样写,那么将会只有medhot3被执行
如果你这么写
xxx.attachEvent(“onclick”,method1); 
xxx.attachEvent(“onclick”,method2); 
xxx.attachEvent(“onclick”,method3);
都会执行而且执行顺序为method3->method2->method1

sadmoom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
JS中动态添加事件(绑定事件)的代码
12-04
两种方式：直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况： 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
主要介绍了JavaScript给按钮绑定点击事件（onclick）的方法,涉及javascript绑定onclick的基本技巧,非常具有实用价值,需要的朋友可以参考下
addEventListener和onclick的区别
DreamFJ的博客
09-12 423
addEventListener可以给一个事件同时注册多个监听器；而使用onclick时，后面的click事件会覆盖前面的click事件 addEventListener和onclick的区别
重生前端之我在javascript敲代码（07-DOM事件（下））
y15237261911的博客
04-15 696
addEventListener事件绑定、监听、捕获 ---》标准浏览器中有作用，非标准IE不兼容语法：元素.addEventListener(事件名,函数,true/false) true代表事件捕获，false代表事件冒泡。由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。
addEventListener和onclick
newperso的博客
11-13 236
普通的onclick事件 普通的onclick就是直接触发事件，并且在同一时间指向唯一的对象 ，如果对一个对象多次绑定,会直接被覆盖只会显示最后一个绑定的事件。 var btn = document.getElementById('demo') btn.onclick = function (){ alert('hello click') } btn.onclick = function (){ alert('hello world') } //.....result：hello world addE
addEventListener与onclick
weixin_44224712的博客
06-20 245
3.addEventListener可以控制listener的触发阶段, addEventListener(type, function, false)在冒泡阶段触发，不写默认也是false；为true的时候是在捕获阶段触发。addEventListener 移除事件的时候，可以用removeEventListener函数。onclick只能给通一个元素绑定一个事件，无论绑定多少个，知会执行最后绑定的那个。addEventListener:可以给元素绑定多个事件，执行顺序是从上至下。
26、addEventListener()和onClick()的区别
y_xiuzhu的博客
03-18 823
26.1 结论 onclick事件在同一时间只能指向唯一对象 addEventListener给一个事件注册多个listener addEventListener对任何DOM都是有效的，而onclick仅限于HTML addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除 IE9使用attachEvent和detachEvent 26.3 实例 addEventListener
动态的绑定事件addEventListener方法的使用
09-04
动态的绑定事件是JavaScript中处理用户交互的一种关键技术，它允许我们向元素添加或移除事件监听器。在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
addEventListener 和 onclick 简单比较
weixin_33720956的博客
01-27 241
首先说一下addEventListener 语法： element.addEventListener(event, function, useCapture) 这里的event是事件名，function是相应的事件，这个useCapture是一个布尔值，默认是false，就是说在冒泡阶段执行，如果为true，就在捕获阶段执行 利用addEventListener可以简单复现网页中对一个对一个元素...
addEventListener() 和 onclick 的区别
2301_79111443的博客
04-05 1110
我们经常会看到有关。
详解onclick和addEventListener的区别
weixin_46726346的博客
05-25 2267
摘要 当我们想要给某个DOM元素绑定事件的时候，最常用的方法是通过on + 事件名字的方式。而在DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener()和removeEventListener(). 并且它们都接受三个参数：要处理的事件名，作为事件处理的一个函数，一个布尔值。 最后的布尔值如果为false，表示在冒泡阶段调用事件处理函数，如果是true，表示在捕获阶段调用事件处理程序。 区别1：同时绑定多个事件 我们来想一个问题，我们使用onclick方法可
19、addEventListener和onclick的区别
Slueia的博客
12-03 86
https://blog.csdn.net/rudy24/article/details/52586257 https://blog.csdn.net/viewyu12345/article/details/79171215
js addEventListener绑定事件方法(详细介绍）
m0_47659279的博客
04-04 9287
事件冒泡 如果两个元素是嵌套的，那么当子元素事件触发后，父元素的对应事件会随后触发，这种事件自下而上的触发就是事件冒泡，类似水中的气泡往上冒 例如下面代码，点击son元素后先触发son的点击事件，然后触发parent的点击事件 <div id="parent" onclick="alert('parent')"> parent <div id="son" onclick="alert('son')">son</div> </div> 事
addEventListener绑定事件的对象方法。
qq_24193261的博客
05-25 2081
当一个事件发生时，分为三个阶段：捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为
事件绑定-addEventListener()和attachEvent()的区别及用法
十二的博客
04-30 750
事件绑定-addEventListener()和attachEvent()的区别及用法
[JS] addEventListener和onclick的区别
林毅洋
06-13 1128
function a(){ alert("A"); } var b = function(){ alert("B") } dom.onclick=a dom.onclick=function(){ b() } //失效 dom.onclick=alert(""); dom.addEventListener("click",a) dom.addEventListener("cli
简述onclick和addEventListener____的区别。
最新发布
05-27
3. 事件处理程序绑定的时机不同：onclick事件处理程序是在元素被点击时立即执行的，而addEventListener事件处理程序是在元素上发生指定事件时执行的，可以通过第三个参数来控制事件的执行顺序。 4. 可以移除事件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值