js on和addEventListener的区别

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量2.3k 收藏
点赞数
分类专栏： js html 文章标签： 前端面试题 on和addEventListener的区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/89487920
版权
本文探讨JavaScript中事件监听的进化，从最初的on方法到addEventListener。addEventListener不仅支持鼠标和键盘事件，还允许添加多个事件处理函数而不互相覆盖。通过第三个参数，可以设置事件响应方式，true为捕获，false为冒泡。对于IE8及更早版本浏览器的兼容性问题，文章也进行了说明。
摘要由CSDN通过智能技术生成

 

Js事件监听处理从最开始的on逐渐衍化成了addEventListener.

如ele.onclick之类的事件处理 变成了ele.addEventListener(‘事件名’,’响应函数’,事件响应方式)

addEventListener最初是监听鼠标如点击之类的事件，后来添加了对键盘按键事件的监听（演变历史）

看下面的代码，on会覆盖上一次的事件,也就是只弹出一次，addEventListener不会，所以会弹出多次 ，当然了，用addEventListener绑定的事件可以用removeEventListener来移除

注意绑定的时候最好使用具名函数而不是匿名函数。

addEventListener第三个参数可以选择是true或者false,默认是false.

true表示捕获方式响应，而false则是冒泡方式

ie8及更早浏览器不支持此方式

具体可以查看http://www.runoob.com/jsref/met-element-removeeventlistener.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="wi
最低0.47元/天 解锁文章
woshidamimi0
关注
专栏目录
HTML-JavaScript-onclick与addEventlistener的使用以及优缺点
星河灿烂的博客
04-02 1456
2018.04.2********************************Day02******************************** author：wills 在html的具有交互功能的标签，比如button标签，或者type为botton的input的标签，它们都可以绑定属性，onclick，当这个按钮被点击时就触发事件。下面是一个简单的网页上添加内容的html文档代...
js中addEventListener和on的区别
weixin_33937499的博客
08-15 208
2019独角兽企业重金招聘Python工程师标准>>> ...
JS里addEventListener和on的区别
打杂人
04-20 1364
一、首先介绍两者的用法1.on的用法：以onclick为例第一种：obj.onclick = function(){ //do something.. }第二种：obj.onclick= fn; function fn (){ //do something... }第三种：当函数fn有参数的情况下使用匿名函数来传参：obj.onclick = function(){fn(param)}; func...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3512
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
on 和 addEventListener 的区别
qq_34507902的博客
08-08 253
onclick用法: let obj=document.getElementsByClassName('head')[0] let obj1=document.getElementsByClassName('head1')[0] obj.onclick=function(){ alert("啦啦1"); }; //注册第二个点击事件 obj.onclic...
on和addEventListener的区别
qq_44573359的博客
08-03 1384
on和addEventListener的区别
addEventListener事件监听器与on函数的介绍与区别
勾勾的博客
06-13 1665
这里写目录标题一、事件监听器addEventListener()addEventListener() 方法用于向指定元素添加事件句柄。实例兼容性二、on方法三.区别addEventListener与on区别测试addEventListener测试on 一、事件监听器addEventListener() addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 使用方
Js on及addEventListener原理用法区别解析
10-15
JavaScript中的事件处理方式有两种主要的形式：`on`属性和`addEventListener`方法。这两种方式在处理事件时有着不同的特性和用法，理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先，...
全面了解addEventListener和on的区别
09-02
在JavaScript中，`addEventListener` 和 `on` 是两种常见的用于添加事件监听器的方法，它们在处理事件时有所区别。这篇文章将深入探讨这两种方法的工作原理及其差异。 首先，`addEventListener` 是DOM Level 2规范...
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
on事件绑定和addEventListener的区别
Anoddguy的博客
09-09 485
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
js 中on和addEventLisenter的区别
weixin_34233421的博客
07-24 1777
2019独角兽企业重金招聘Python工程师标准>>> ...
【前端】【H5 API】addEventListener监听网络状态的变动
萌狼蓝天の技术栈
03-12 3201
WebviewObject Webview窗口对象，用于操作加载HTML页面的窗口 属性 id：webview窗口的标识 方法：监听 addEventListener 添加事件监听器 wobj.addEventListener( event, listener, capture ); 参数说明： event: ( WebviewEvent ) 必选 Webview窗口事件类型 liste...
addEventListener方法和on的区别
weixin_49346957的博客
11-05 938
on事件 Javascript中可以对一些页面的事件设定触发值 , 例如常用的点击click 鼠标移动onmousemove等等,可以对其设定值来实现事件触发后执行的操作 addEventListener()方法 addEventListener(‘click’,function,Boolean) 参数click表示监听事件 : click等,就是之前不加前缀 on 的事件(必写) 参数function表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数(必写) 参数Boole
事件绑定on和addEventListener的区别
caoY的博客
12-04 3157
今天在敲代码的时候遇到的问题，刚好有空。就记了下来。 首先，我们应该知道，在绑定事件的时候有三种方法。 拿最简单的click举例说明下。第一种，直接在html中，使用onclick；第二种，在js代码中使用元素.click来调用；第三种就是事件元素.addEventListener()来调用。 那么他们的区别在哪呢？ 这是一段测试使用代码 在js代码中用on绑定，如下 window.
【js】window.addEventListener介绍说明
热门推荐
Q仔的博客
06-29 6万+
原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void 作用 　　侦听事件并处理相应的函数。[1] 参数
mui('.').on和addEventListener的区别
04-09
mui('.').on和addEventListener都是用于添加事件监听器的方法，但它们有一些区别。 1. 语法： - mui('.').on：这是MUI框架提供的方法，用于选择DOM元素并添加事件监听器。它的语法是mui(selector).on(event, callback)。 - addEventListener：这是原生JavaScript提供的方法，用于添加事件监听器。它的语法是element.addEventListener(event, callback)。 2. 事件绑定方式： - mui('.').on：可以同时为多个DOM元素添加事件监听器，通过选择器选择需要绑定事件的元素。 - addEventListener：只能为单个DOM元素添加事件监听器，需要直接指定元素。 3. 兼容性： - mui('.').on：是MUI框架提供的方法，主要用于移动端开发，对于不同浏览器的兼容性可能有所差异。 - addEventListener：是原生JavaScript提供的方法，具有较好的跨浏览器兼容性。 4. 功能扩展： - mui('.').on：MUI框架提供了一些额外的功能，例如可以通过选择器选择多个元素一次性添加事件监听器。 - addEventListener：原生JavaScript提供的方法相对简单，没有额外的功能扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值