js onclick与addEventListener 区别及用法

最新推荐文章于 2023-08-08 16:12:21 发布
最新推荐文章于 2023-08-08 16:12:21 发布
阅读量200 收藏 2
点赞数
原文链接：http://www.cnblogs.com/l-520/p/8882399.html
版权

addEventListener(建议使用)好比一个监听容器，这个容器里面可以装很多个监听事件，而且每一个事件都会执行。

onclick 在今天之前我使用这个(onclick)比较多(单纯的是因为看到的基本都是用这个，有个缺点就是同一个元素绑定两个不同的事件前一个事件会被后一个事件覆盖。

今天在公司问了一下这两个的区别，印象很深刻，自己也验证了一下，我这里上一段我的验证代码(代码里面的‘222’会被覆盖不弹出)，大家也可以试一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>onclick and addEventListener</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <div id="btnOk1">111</div>
        <script>
            document.getElementById('btnOk1').addEventListener('click',function(){
                alert('111');
            });
            document.getElementById('btnOk1').addEventListener('click',function(){
                alert('333');
            });
            document.getElementById('btnOk1').onclick = function(){
                alert('222');
            }
            document.getElementById('btnOk1').onclick = function(){
                alert('444');
            }
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/l-520/p/8882399.html

alec1208
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
Js on及addEventListener原理用法区别解析
10-15
这两种方式在处理事件时有着不同的特性和用法，理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先，我们来看`on`属性的用法。`on`属性允许我们直接将事件处理函数赋值给特定的事件名称...
addEventListener与onclick的区别
qq_44473483的博客
06-30 7124
在js中一直使用的addEventListener，依稀记得是看视频时老师说的这个好些，但也一直不明白两者之间的优缺点和联系，今天整理了下，对两者进行简单分析。 1.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件。 document.getElementById("myDIV").addEventListener("click", function() { alert(1) });
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4055
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
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
JS实现绑定事件监听的几种方法详解
最新发布
wangxuanyang_zer的博客
08-08 5673
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
JavaScript onclick事件使用方法详解
10-15
JavaScript中的`onclick`事件是网页交互中非常常见的一种事件处理机制，它允许开发者在用户对某个元素进行鼠标点击时执行特定的JavaScript代码。这个事件主要应用于HTML元素，如按钮、链接、图片等，使得网页具备...
javascript attachEvent和addEventListener使用方法
01-19
attachEvent方法 按钮onclick addEventListener方法 按钮click 两者使用的原理：可对执行的优先级不一样，下面实例讲解如下： attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列） ...
onclick和addEventListener 的区别
wlijun_0808的博客
11-27 203
onclick和addEventListener 的区别
JS中addEventListener的用法
Allenyhy的博客
09-30 2万+
事件模型 这是一个完整的事件流： 事件捕获----处于目标----事件冒泡 注意：事件捕获由于浏览器兼容问题用的比较少   事件处理程序（addEventListener） 格式为：element.addEventListener(type, handle, false); type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！ handle...
javascript:addEventListener
weixin_34109408的博客
04-02 145
addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。 简介 addEventListener 为文档节点、document、window 或 XMLHttpRequ...
JS addEventListener()方法的使用介绍
developerFBI的专栏
05-15 3851
火狐和其他浏览器都支持W3C标准的addEventListener方法。addEventListener() 方法，事件监听。removeEventListener() 方法来移除事件的监听。如果要针对IE浏览器就要使用attachEvent(event,function)。如果你开发前端页面要兼容IE、Chrome、Firefox等浏览器，请参考:https://www.cnblogs.com/carriezhao/p/7270335.html。下面介绍addEventListener()的用法。 ...
【JS】原生JS事件绑定onclick和addEventListener
热门推荐
mooonyuan的博客
04-11 3万+
onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 this与event查一不大 推荐使用event...
事件绑定on和addEventListener的区别
caoY的博客
12-04 3148
今天在敲代码的时候遇到的问题，刚好有空。就记了下来。 首先，我们应该知道，在绑定事件的时候有三种方法。 拿最简单的click举例说明下。第一种，直接在html中，使用onclick；第二种，在js代码中使用元素.click来调用；第三种就是事件元素.addEventListener()来调用。 那么他们的区别在哪呢？ 这是一段测试使用代码 在js代码中用on绑定，如下 window.
前端事件处理addEventListener和onclick
企鹅菜鸟的成长过程
03-16 6126
先留下坑，慢慢填 1.什么是事件处理？ DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent 2.addEventListener addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。在
onclick vs addEventListener
SalmonellaVaccine的专栏
09-07 488
http://www.simonewebdesign.it/onclick-vs-addeventlistener/ Feb 25th, 2013 What’s the difference between these two lines of code?   element.onclick = function() { /* d
原生js，onclick与addEventListener区别
兵临城下的专栏
07-05 1541
onclick添加的事件会被覆盖 addEventListener可以添加多个事件，先后执行var d=document.getElementById("btn"); //这个事件会被覆盖不会执行 d.onclick=function(){ console.log(1); } //这个事件正常执行 d.onclick=function(){ console.log(1); } /**/ /
onclick 与addeventlistener区别
05-13
因此，`onclick` 和 `addEventListener` 的区别在于它们的用法和功能。`onclick` 只能添加一个事件处理程序，而 `addEventListener` 可以添加多个事件处理程序。另外，`addEventListener` 还可以用于添加其他类型的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值