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
关注
专栏目录
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 3674
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
js事件监听：addEventListener() 与 移除事件：removeEventListener()
热门推荐
weixin_40122996的博客
09-08 6万+
说事件绑定得先说事件流 事件流 冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 来个例子看一下吧！ &lt;!DOC...
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的区别
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 () {}` ...
addEventListener事件监听器与on函数的介绍与区别
勾勾的博客
06-13 1676
这里写目录标题一、事件监听器addEventListener()addEventListener() 方法用于向指定元素添加事件句柄。实例兼容性二、on方法三.区别addEventListener与on区别测试addEventListener测试on 一、事件监听器addEventListener() addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 使用方
on事件绑定和addEventListener的区别
Anoddguy的博客
09-09 485
js 事件绑定on()的用法，以及对于其他绑定事件的比较
vivian_wang07的博客
05-12 1万+
一： 函数绑定
JS之事件
gxgalaxy
05-23 212
如何绑定事件 1、.onclick = function(){}； 兼容性很好，但是一个元素的同一事件上只能绑定一个处理，基本等同于写在HTML行间上 var div = document.getElementsByTagName('div')[0]; div.onclick = function(){ console.log(this); } 2、obj.addEventList...
js相关事件
qq_50721840的博客
03-30 472
js事件是指我们使用鼠标或键盘做了某些事件来触发对应的处理函数。所有的事件都是以on开头，分为三类：鼠标事件，键盘事件，HTML事件。由三部分组成：触发事件的元素，对应的事件，事件的处理函数。分为以下四种模式： 内联模式1 <button onclick="alert('hello')">点击</button> 内联模式2 <button onclick="自己定义的函数名( )">点击</button> 脚本模式1 doucument.ge
关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别
王金龙
07-03 4万+
jquey事件处理
Javascript 常用on事件
YSKBO743639220的博客
04-25 2196
onclick 鼠标点击事件 ondblclick 鼠标双击事件 onmousedown 鼠标上的按钮被按下了 onmouseup鼠标按下后，松开时激发的事件 onmouseover 当鼠标移动到某对象范围的上方时触发的事件 onmousemove 鼠标移动时触发的事件 onmouseout 当鼠标离开某对象范围时触发的事件 onkeypress当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onkeydown当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象
原生js实现on与off 方法
永恒的避风港
03-26 2568
使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。 实现方式 以下为个人类库jTool 中 Event 实现方式。 代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。 一个空壳子 首先通过一个空架子来了解下实...
js事件on动态绑定数据，绑定多个事件
lml_little的博客
11-29 1万+
一.on('clcik')与$('').clcik()方法的区别： on('clcik')： 1.绑定多个事件，用空格隔开事件和命名空间如：“click”或“keydown.myPlugin”。或者格式为 on({ "clcik": function(){}, mouseover: function(){} }) 命名空间: namespace 名字{ 定义的数据； 定义的函数；
mui('.').on和addEventListener的区别
04-09
mui('.').on和addEventListener都是用于添加事件监听器的方法，但它们有一些区别。 1. 语法： - mui('.').on：这是MUI框架提供的方法，用于选择DOM元素并添加事件监听器。它的语法是mui(selector).on(event, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值