JavaScript多个事件的绑定（所有浏览器均可以用）

最新推荐文章于 2024-04-25 23:56:41 发布
最新推荐文章于 2024-04-25 23:56:41 发布
阅读量4k 收藏 3
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yueqin0512/article/details/108881961
版权

单个事件的绑定

添加按钮
<button id="btn01">点击</button>
使用对象.事件 = 函数的形式绑定响应函数，他只能同时为一个元素的一个事件绑定一个函数

//点击按钮以后弹出内容
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
   
    alert("1");
};

若想绑定多个事件

使用对象.事件 = 函数的形式绑定响应函数,不能绑定多个函数，如果绑定多了，后面的函数会覆盖掉前面的函数

btn01.onclick = function(){
   
    alert("1");
};
btn01.onclick = function(){
   
    alert(
最低0.47元/天 解锁文章
吃不胖的猫o(=^ェ^=)m
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript之完成我们自己定义的bind()函数来实现多个事件同时触发
Eluckburlkmotion的博客
07-25 347
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ //点击按钮以后会弹出内容 //获取按钮对象 var btn01=document.getElementById("btn01");
用JavaScript事件串连执行多个处理过程的方法
10-31
如果希望一个事件可以依次执行多个处理过程，就需要使用特殊的方法。Internet Explorer从5.0开始提供了`attachEvent`方法，使用这个方法，可以给一个事件指派多个处理过程。Opera也支持这个方法。但是，Mozilla/Fire...
[JavaScript]解决addEventListener绑定同样的函数多次执行/解决函数绑定带参数却自动执行
对未知的一切抱有热忱
04-30 1360
Eventlistenersinceyoudefinenewfunction(nomatteritlooksthesame,itisdifferentobject). TousethesamehandlereachtimeyoumustdefineitoutsidebindEvents andpassitbyname(byre...
JS实现对用户名、密码进行正则表达式判断，按钮绑定多个事件，网页跳转
最新发布
weixin_51621120的博客
04-25 528
目标：使用JS实现对用户名和密码进行正则表达式判断，用户名和密码正确时，进行网页跳转。
如何把多个js函数绑定到事件上面
suwu150
12-29 2537
在给网页加一些特效时,经常要加入“onload”事件，即在网页加载完后执行某事件，例如：<body onload=”alert(‘欢迎光临!’)”，但这样做有个大的缺陷，事件会在网页完全下载完后才会执行，包括网页中的静态资源（图片或Flash等），如果网页中的图片比较大或有很多图，可能还没等网页完全下载完网友已经点击链接到其它网页去了，这样这个事件就没有执行了。 这时我们会想到用“window.o
JS一个元素怎么绑定多个事件
BarryLee的博客
02-09 6033
有时候一个一个元素要绑定多个事件，其实是分开写 先看这个例子，我们预期它先执行alert1，然后是alert2，但事实上是没有alert1，因为覆盖了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绑定多个事件&lt
js同一标签绑定多事件的方式
kloumb的博客
08-23 941
jquery同一标签绑定多个事件的几种方式 ①$(document).ready(function(){ $("button").bind({ click:function(){}, mouseover:function(){}, mouseout:function(){}; }); }); ②$(function(){ ...
JS 绑定多个事件的区别【addEventListener()与attachEvent()的区别】
夏沐的博客
02-19 1409
为元素绑定多个事件的方法有：addEventListener()与attachEvent() 区别： 1、参数个数不一样， addEventListener()三个参数，attachEvent()两个参数 2、 addEventListener()  谷歌，火狐，IE11支持，IE8不支持；        attachEvent() 谷歌，火狐不支持，IE11不支持，IE8支持。 3、...
JavaScript实现为事件句柄绑定监听函数的方法分析
10-19
本文将深入探讨如何使用JavaScript为事件句柄绑定监听函数，以及不同浏览器的兼容性问题和解决策略。 1. **传统绑定方法** 这是最基础的事件绑定方式，通过直接将函数赋值给DOM元素的事件属性来实现，如`elem....
浅谈JavaScript事件绑定的常用方法及其优缺点分析
10-21
- 可以为同一元素添加多个事件处理函数，不会覆盖之前绑定的函数。 - **缺点**： - 不兼容IE浏览器，需要使用`attachEvent`替代。 - 需要处理不同浏览器之间的兼容性问题。 3. **IE方式（attachEvent）** - **...
JavaScript为事件句柄绑定监听函数实例详解
10-23
W3C标准的事件监听方法是`addEventListener`，它允许在同一事件句柄上注册多个监听函数，并可以选择在捕获或冒泡阶段执行。例如： ```javascript elem.addEventListener('click', function() {...}, false); ``` 这...
javascript attachEvent绑定多个事件执行顺序问题
10-28
执行顺序是没有规律的，但是每次执行的顺序是一样的，如果是随机那么应该每次执行的顺序都不一样才对，这才是我想要说明的
javascript实现简单的on事件绑定
10-21
使用事件委托可以有效地管理大量的交互元素，减少内存消耗，并简化代码结构。在处理动态添加的元素时，事件委托尤其有用，因为它能在元素创建后仍能正常工作，而无需重新绑定事件。 总的来说，这段代码提供了一个...
js domEle.addEventListener()_一个元素添加多个事件.html
weixin_42193179的博客
07-29 4335
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>addEventListener_同一个元素添加多个事件</title> </head> <body> <p>实例使用 addEventListener(...
JavaScript--addEventListener()方法
m0_74293254的博客
07-14 932
在上述示例中，我们通过getElementById()方法获取到id为"myButton"的按钮元素，然后使用addEventListener()方法给按钮添加了一个点击事件的监听器。当按钮被点击时，匿名函数将会执行，并在控制台输出"按钮被点击了！对于addEventListener()方法，它用于向指定的元素添加事件监听器，并在该元素上触发指定的事件时执行相应的函数或代码。
window.onload事件--attachEvent和addEventListener
做个好的手艺人
11-08 986
可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body 中，也可以全放到window.onload中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window.attachEvent和 window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和...
JS addEventListener多次绑定同一事件，触发多次
小妖666个人笔记
09-25 1万+
今天项目上遇到一个问题，是因为addEventListener绑定事件时，执行了多次，导致执行了多次事件。在不能让绑定事件执行一次的情况下有没有办法解决这个问题呢？ 模拟代码： function handleAction (event) { console.log('i am action', event); } var btn = document.getElementById('button'); btn.addEventListener('click', event => handleA
js事件on动态绑定数据，绑定多个事件
热门推荐
lml_little的博客
11-29 1万+
一.on('clcik')与$('').clcik()方法的区别： on('clcik')： 1.绑定多个事件，用空格隔开事件和命名空间如：“click”或“keydown.myPlugin”。或者格式为 on({ "clcik": function(){}, mouseover: function(){} }) 命名空间: namespace 名字{ 定义的数据； 定义的函数；
javaScript中为元素绑定多个事件
aManWithDreams的博客
11-17 1004
javaScript中为元素绑定多个事件 在DOM操作中，为元素绑定多个事件有两种方式，具体如下： 第一种方式： 对象.addEventListener("事件类型",事件处理函数,false); //参数1：事件的类型----没有on，例如：注册点击事件,此时事件类型="click" //参数2：事件处理函数----函数 //参数3：false //注意：此方法具有兼容性，谷歌，火狐支持，i...
面试题技术必背1
08-08
"面试题技术必背1，涵盖了JavaScript数据类型检测、事件绑定的区别以及浏览器兼容性处理等核心知识点。" 在JavaScript编程中，`typeof` 操作符用于确定变量的数据类型。它能返回以下几种数据类型： 1. `object` 2....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值