原生JS-----------ADDEVENTLISTENER添加事件和直接添加事件区别

最新推荐文章于 2024-02-17 12:37:41 发布
最新推荐文章于 2024-02-17 12:37:41 发布
阅读量256 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44318855/article/details/103143740
本文探讨了原生JavaScript中直接绑定事件与使用addEventListener的区别。直接绑定事件时，后绑定的会覆盖前绑定的；而使用addEventListener则可以绑定多个事件处理器，类似于jQuery的事件绑定方式。注意在使用addEventListener时，事件名称不带'on'前缀。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原生JS-----------ADDEVENTLISTENER添加事件和直接添加事件区别
1.

a. document.querySelector("#a").onclick=function() {console.log("11111")}

b. document.querySelector("#a").onclick=function(){console.log("222")}

结果： 222

其中a和b对同一个dom对象都绑定了同样的事件结果只执行最后绑定的那个事件。

结果：11111 222

如果使用addEventListener对同一个对象绑定相同的事件的话a和b都会执行，在使用这个js api时需要注意绑定的事件跟jquery一样，onclick去掉on直接写click，onmouseover写mouseover。

lillillilll
关注
浅谈Vue.js 组件中的v-on绑定自定义事件理解
10-18
Vue.js的事件系统与浏览器的EventTarget API分离，尽管它们的行为很相似，但是Vue.js内部的$on和$emit方法并不是addEventListener和dispatchEvent方法的别名。Vue实例实现了一个简单的事件接口，该接口允许我们监听...
Javascript-TaskList
04-28
Vanilla-JS是指不依赖任何库或框架的原生JavaScript。在这个项目中，JavaScript主要负责处理用户的交互事件，如点击按钮、提交表单等。例如，当用户点击“添加任务”按钮时，JavaScript会捕获该事件，获取输入框的...
addEventListener 和 直接添加事件的区别
我是张跑跑
10-11 1351
1 概述 addEventListener 和 直接添加事件的区别！ 2 详述 首先，需要讲一下绑定事件的分类，也就是添加事件的方法，在js中，一般分两大类，直接添加和事件监听（这里的说法有待考究）； test.onclick = function(){} test.addEventListener(“click”, function(){}) 因为在 js 中不支持事件重载（也就是同时绑定两...
原生js，onclick与addEventListener区别
兵临城下的专栏
07-05 1598
onclick添加的事件会被覆盖 addEventListener可以添加多个事件，先后执行var d=document.getElementById("btn"); //这个事件会被覆盖不会执行 d.onclick=function(){ console.log(1); } //这个事件正常执行 d.onclick=function(){ console.log(1); } /**/ /
原生js中使用addEventListener实现拖拽事件
HadwinLing
10-06 4328
addEventListener()方法用于指向元素添加事件，注意在IE8及更早版本，opera7.0及更早版本都不支持addEventListener(),但是可以使用attchEvent()方法来进行添加事件 提示：使用removeEventListener()来溢出addEventListener()方法添加事件 代码实现部分 <!DOCTYPE html> <html l...
原生js事件处理函数addEventListener、attachEvent兼容性处理
u010234868的专栏
06-26 250
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn"> <script src="js/common.js"></script> &lt.
小白必看——原生JS解决addEventListener ()以及attachEvent()兼容问题
qq_31232201的博客
08-26 1268
原生JS解决兼容问题 为一个元素绑定多个事件的时候我们可以使用 obj.addEventListener( ) 但是我们需要考虑兼容问题，这种方法在IE8以下不支持 所以我们就需要另一种方法去解决IE中的问题; addEventListener ()的使用方法 obj.addEventListener("绑定的事件类型", 回调函数, 布尔值); /*参数一 * 绑定的事件类...
vue实现在v-html的html字符串中绑定事件
10-16
这里介绍两种主要的方法来实现该功能：事件委托和直接绑定事件监听器。 首先，介绍事件委托方法，适用于动态添加的元素，或者无法直接访问的元素。事件委托是一种在父元素上添加事件监听器的技术，然后根据事件触发...
Node.js-极其简便的快速实现隐藏标题栏和导航栏
08-12
总结起来，无论是Node.js中的Web开发还是Android开发，实现隐藏标题栏和导航栏的滚动效果都需要理解JavaScript事件处理、CSS动画以及Android的布局系统。在Web端，主要依赖JavaScript和CSS；在Android端，需借助`...
shuup-vanilla:香草javascript中的shuup前端
04-05
然而，"香草JavaScript"（Vanilla JavaScript）指的是不依赖任何外部库或框架的原生JavaScript，它回归到JavaScript的核心功能，强调简洁、高效和自定义性。本文将深入探讨如何使用香草JavaScript和HTML来创建一个...
【原生JS】addEventListener 和 on 的区别
zuncle的博客
02-08 720
为什么需要addEventListener？先来看一个片段： html代码<div id="box">追梦子</div>用on的代码window.onload = function(){ var box = document.getElementById("box"); box.onclick = function(){ console.log("我是box1");
js addeventlistener
最新发布
Charles1938229的博客
02-17 5795
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
JavaScript-事件
qq_52822043的博客
03-24 2406
1. 注册事件（绑定事件） 给元素添加事件，成为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 1）传统注册方式 利用on开头的时间onclick <button onclick = "alert('hi')" ></button> btn.onclick = function() {} 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 2）方法监听注册 W3C标准，推荐方式...
易智联LM401模块学习（五）——外部中断
weixin_46046597的博客
04-13 629
扩展中断和事件控制器（EXTI）通过可配置和直接的事件输入来管理各个CPU和系统的唤醒。它向电源控制提供唤醒请求，并向CPU NVIC产生中断请求,向CPU事件输入产生事件。提示：以下是本篇文章正文内容，下面案例可供参考一个外部中断通道可以被多个pin使用，但同一时间只能有一个进行使用，通过多路复用器可以完成此操作。
【正点原子STM32连载】第十六章 外部中断实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
weixin_55796564的博客
08-23 1186
1）实验平台：正点原子MiniPro H750开发板4）对正点原子STM32感兴趣的同学可以加群讨论：879133275。
23、JS事件
qq_40637729的博客
10-15 344
事件处理函数 如何绑定事件处理函数 1.ele.onxxx = function (event){} 2.obj.addEventListener(type,fn, false); 3.obj.attachEvent(‘on’+ type, fn); 小练习 事件处理程序的运行环境 1.ele.onxxx = function (event){} 2.obj.addEventListener(type, fn, false); 3.obj.attachEvent(‘on’+ type, fn);
js addEventListener绑定事件监听基础，用事件传播原理，理解事件监听函数执行顺序
CodePrincess的博客
09-07 2855
js addEventListener绑定事件监听基础，用事件传播原理，理解事件监听函数执行顺序
js中如何添加一个事件监听addEventListener
热门推荐
xuehyunyu的博客
06-21 1万+
通过鼠标单击可以打开一个网页或者弹出一个对话框，这些是通过鼠标事件监听来实现的。 实现事件监听的代码示例： 您的浏览器不支持js! 事件监听 var element=document.getElementById("btn")//通过id（btn）获取一个元素 element.addEventListene
swiped-events:纯JavaScript实现移动端滑动事件监听
- **vanilla-js**: 强调了这个库的轻量级和无依赖性，不依赖任何其他JavaScript库。 - **hybrid-apps**: 指出这个库适用于开发混合应用。 - **no-dependencies**: 表明在使用该库时不需要额外的依赖。 通过`swiped-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值