原生js的addEventListener给同一个对象的同一个事件注册多个事件处理函数

最新推荐文章于 2022-11-25 10:04:12 发布
最新推荐文章于 2022-11-25 10:04:12 发布
阅读量768 收藏
点赞数
分类专栏： javaScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/118196360
版权 
<!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>
	<!-- <script src="js/ts1.js"></script>
	<script src="js/ts2.js"></script> -->
	<script>
		var btn = my$('btn'); // 调用ts1.js、ts2.js中btn的onclick只能显示最后一个结果hello world
		// 使用addEventLinstener() DOM标准函数 IE9+ 可以给同一个对象的同一个事件注册多个事件处理函数 onclick不可以
		btn.addEventListener('click', function () {
			alert('hello');
		});
		btn.addEventListener('click', function () {
			alert('hello world');
		});
	</script>
</body>
</html>

每一天，每一步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件处理函数
xiaomin_er的博客
08-19 1559
事件绑定 DOM 0级事件绑定 语法：事件源.on事件类型 = 事件处理函数 给一个事件源的同一个事件类型，只能绑定一个事件处理函数 DOM 2级事件（事件侦听器/事件监听器） 2-1：标准浏览器 语法：事件源.addEventListener(‘事件类型’，事件处理函数) 特点：1. 可以给同一个事件源的事件类型绑定多个事件处理函数 多个事件处理函数，顺序绑定，顺序执行 div.addEventListener('click',function(){ console.log('我被点击了'
JavaScript事件
Amoy813的博客
10-19 1249
事件的概述 1.事件：可被理解为是JavaScript侦测到的行为。 举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域。 2.事件处理程序：指的是JavaScript为响应用户行为所执行的程序代码。 举例：用户单击button按钮，这一行为就会被JavaScript中的click事件侦测到；然后让其自动执行为 click事件编写的程序代码，如在控制台输出“按钮被单击”。 3.事件驱动试：是指在web页面中JavaScript的事件侦测到用户行为并执行相应的时间处理程序的过程。 举
原生js:DOM2级事件绑定(addEventListenr和attachEvent之间的区别)重要
weixin_33985679的博客
03-04 567
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&q
怎样解决支持同一元素句柄可以绑定多个监听函数问题？
baidu_36681154的博客
08-25 791
问题描述： 支持同一元素句柄可以绑定多个监听函数 我们来分析这个问题，看下面的例子： 这里我们得理解 1）同一元素是意思？ 2） 绑定多个监听函数？ 如下面例子 window.onload=function(){//1个监听函数  alert("1");}//没有输出结果 window.onload=function(){/2个监听函数  alert("2");
[JavaScript]解决addEventListener绑定同样的函数多次执行/解决函数绑定带参数却自动执行
对未知的一切抱有热忱
04-30 1359
Eventlistenersinceyoudefinenewfunction(nomatteritlooksthesame,itisdifferentobject). TousethesamehandlereachtimeyoumustdefineitoutsidebindEvents andpassitbyname(byre...
推荐4个原生javascript常用的函数
10-24
这个函数接受一个元素节点和一个样式对象，通过遍历样式对象并将其合并到元素的`cssText`属性，从而实现批量设置CSS样式。 【三】获取元素类名 `getByClassName`函数用于查找具有特定类名的DOM元素，它可以指定父...
原生js写的一个华容道小游戏
09-22
原生JS的addEventListener方法可以方便地实现这一点。 四、游戏逻辑 华容道的核心在于其复杂的解谜逻辑。我们可以通过深度优先搜索（DFS）或广度优先搜索（BFS）等算法，结合回溯法来实现自动求解功能。在原生JS中...
原生js点击弹出多个城市选择框特效代码
03-20
本示例中的"原生js点击弹出多个城市选择框特效代码"就是一个典型的应用场景，它实现了类似51job网站上的城市选择功能，当用户点击按钮时，会弹出一个包含多个城市的下拉选择框，为用户提供方便快捷的交互体验。...
原生js点击弹出多个城市选择框代码.zip
11-26
在原生JS中，我们可以在按钮的`click`事件上添加一个监听器，并在事件处理函数中处理弹出城市选择框的逻辑： ```javascript document.getElementById('openCitySelector').addEventListener('click', function() { ...
原生js写的一个轮播图
08-13
\n\n综上所述，这个“原生js写的一个轮播图”项目展示了JavaScript在前端组件开发中的强大能力，通过面向对象编程实现了可复用和易于维护的代码结构，结合动态加载、动画效果和用户交互，构建了一个功能完善的轮播图...
addEventListener绑定事件，它可以绑定多个响应函数
qq_46302247的博客
06-16 1722
dom.addEventListener(“click”,function(){……},false) 和 dom.onclick= function() {……} 的区别？ addEventListener绑定事件，它可以绑定多个响应函数 attachEvent的callback回调默认是window（addEventListener的callback默认是被绑定事件的dom），则callback中的this也指向window，但是我们希望是obj，所以在callback外面包一个function，则可以
关于ios NSNotificationCenter 可以多次添加（addObserver） 同一个通知的 问题
just-time的博客
01-10 4354
偶然的一次， 开发中， 给同一个通知 注册了多次， 发现这个通知多次调用响应的方法， 才发现， 同一个对象是可以多次注册同一个通知的。 这点以后需要注意，   1.写在ViewController中的注册通知，在页面pop后会自动在通知中心移除自己；写在其他对象中的注册通知，释放后不会自动移除自己，这时候会引起崩溃。 另外 有说通知发送和 接受都是在同一线程内的，这个我不赞同！   2.发...
addEventListener(自己的学习笔记)
weixin_34254823的博客
11-28 282
任何能够成为事件目标的对象(window对象，document对象和所有文档元素对象)都定义了addeventlistener方法接受3个参数1：要注册处理程序的事件类型，是字符串，但是不包含前缀“on”2：当指定类型的事件发生时应调用的函数3：布尔值，可以忽略传，true表示将注册为捕获事件处理程序能通过多次调用addeventlistener()为同一个对象注册统一事件类型的多个处理程序函数当...
Javascript中的事件处理（事件注册、删除、委托）
m0_46420078的博客
11-29 1124
一、Javascript中的事件处理 1、事件 ：用户进行的某种操作 2、事件源：产生（触发 ）事件的对象 3、事件处理程序（事件处理函数 ）：当事件被触发后所执行的操作（代码） 4、事件的注册：让浏览器对象能够识别事件 （1）传统的方式注册 ：元素对象.事件名 = function（）{ 事件处理程序 } <b...
注册事件的两种方式
shhghvvh的博客
11-25 832
利用on开头的事件onclick这种方式的特点是：注册事件具有唯一性。同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。最终点击按钮弹出的是“我是第二个”
JavaScript addEventListener()事件监听方法
weixin_30300225的博客
08-06 975
addEventListener()方法将事件处理程序附加到指定的元素。 addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEvent...
JavaScript学习笔记（12）
liuyueyi1995的博客
10-25 301
事件 JS与HTML之间通过事件进行交互。之前的jQuery笔记总结过事件的相关内容，很多重复的东西就省略掉了。事件相关的API很冗杂，很多东西可以即用现查，但基本的核心和概念还是需要掌握的。
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数...
weixin_34417200的博客
01-08 576
本篇体验JavaScript事件的基本面，包括：   ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加载之后起效   有这样一段简单的代码：&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ut...
小白必看——原生JS解决addEventListener ()以及attachEvent()兼容问题
qq_31232201的博客
08-26 1168
原生JS解决兼容问题 为一个元素绑定多个事件的时候我们可以使用 obj.addEventListener( ) 但是我们需要考虑兼容问题，这种方法在IE8以下不支持 所以我们就需要另一种方法去解决IE中的问题; addEventListener ()的使用方法 obj.addEventListener("绑定的事件类型", 回调函数, 布尔值); /*参数一 * 绑定的事件类...
原生js点击事件addEventListener
最新发布
10-12
addEventListener 是原生 JavaScript 中用于添加事件监听器的方法，可以为一个元素添加多个事件监听器，语法如下： ```javascript element.addEventListener(event, function, useCapture); ``` 其中，event 表示要监听的事件类型，如 "click"、"mouseover" 等；function 表示事件触发时要执行的函数；useCapture 表示是否使用事件捕获，一般设为 false。 例如，为一个按钮添加点击事件监听器： ```javascript var btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { console.log("Button clicked!"); }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值