JavaScript进阶-循环事件加监听

已于 2022-03-08 16:28:08 修改
阅读量1.9k 收藏 5
点赞数 3
分类专栏： Javascript笔记 文章标签： javascript 前端
于 2022-03-08 14:55:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44813296/article/details/123352402
版权
在JavaScript中，当需要为循环创建的多个按钮添加事件监听时，若使用var会导致所有按钮触发同一事件。原因是变量提升和作用域问题。解决办法包括使用let创建块级作用域或利用闭包来保持每个按钮的独立状态。
摘要由CSDN通过智能技术生成

问题描述

当我们需要循环事件加监听，如需求：点击某个按钮, 提示"点击的是第n个按钮，结果发现点击不同按钮，结果都是相同。错误场景代码如下：

<button>测试1</button>
<button>测试2</button>
<button>测试3
最低0.47元/天 解锁文章
或桥
关注
专栏目录
在js中使用for循环注册监听事件
weixin_43812547的博客
02-01 635
在使用百度地图api进行开发时遇到了需要给地图上的点标记添加监听事件的需求，于是使用java开发时的习惯在for循环中给marker按钮添加监听事件，使用如下代码 for(var item in survs){ var markerName=survs[item].videoId; var coordinate=survs[item].coordinate; console.log(coordinate.sp
JavaScript 进阶 31 -- 简单来说下vue.js 数据监测observe的实现的原理
宁静致远
12-22 478
数据监测observer实现响应式的原理，只要要数据发生改变，页面视图就发生变化。 简单来说就是一个方法，里面使用forin循环，分别为对象属性添加 get() 和 set() 方法，来实现对数据监测，这就要用到上一篇文章中提到的 defineProperty 对象自定义属性 直接看段代码： let obj ={ name:'tom', age:22, company:{ address:'北京' } }; obj.name = 'lily' ...
循环事件事件监听
ljmkmnkl的博客
08-17 904
这几天在做一个效果，需要用到点击图片得到其下标位置去对他执行，搞了几天都没搞清楚。 在今天下午实在不想想了，就去百度了下，才发现百度果然是强大的！ 循环中设置的监听事件怎么传递参数  分享| 2014-05-07 22:16Pie_lin | 浏览 224 次 在我的php里面有一个div一直不间断的滚动着多张小图，我js文件里要的效果是一旦点击其中一个小图就把
JavaScript高级——循环遍历加监听
最新发布
Fan_web的博客
09-16 342
本文主要是分享了关于javascript中的循环遍历加监听的案例，下一篇继续分享JavaScript高级学习中的闭包的内容。
JS 中循环遍历加监听事件的问题
花铛
10-25 1753
<button>测试一</button> <button>测试二</button> <button>测试三</button> var btns = document.getElementsByTagName('button') for(var i = 0; i < btns.length; i++) { var btn = btns[i] btn.onclick = function () { alert(`第${i +
JS高级：闭包-循环遍历加监听
weixin_47295886的博客
11-07 238
点击击按钮出现每个按钮显示的数字 ——将按钮对应的下标保存在属性中。
2022-7-12 学习日记（4th day）JS循环+函数+监听事件
weixin_49627122的博客
07-12 294
JavaScript基础循环，内置函数，监听事件以及两道相关练习题
vue-基础-进阶-111
02-01
3. **指令与过滤器**：Vue提供了多种内置指令，如`v-if`（条件渲染）、`v-for`（循环遍历）、`v-on`（事件处理）等，用于增强HTML。同时，过滤器允许我们对数据进行格式化处理，例如`| capitalize`可以将字符串首...
JavaScript进阶练习及简单实例分析
10-22
本文介绍了一个JavaScript的进阶练习示例，该示例涉及的主要知识点包括对象的创建与属性操作、事件监听、...这样的练习有助于提高对JavaScript语言特性的理解和代码编写能力，是学习JavaScript进阶内容的重要实践方式。
JavaScript进阶第一天.zip
09-10
在“JavaScript进阶第一天”的学习资源中，我们可以深入探讨以下几个关键知识点： 1. **变量与数据类型**：JavaScript支持七种数据类型，包括基本数据类型（Number、String、Boolean、Null、Undefined、Symbol、...
js利用闭包实现循环监听
qq_44604924的博客
09-05 215
描述：点击按钮，显示是第几个按钮 var btns = document.getElementByTagName("botton"); //利用闭包实现 for(var i=0;i<btns.length;i++){ (function(i){//形参 var btn = btns[i]; btn.onclick = function(){ alert("第"+(i+1)+"个按钮"); } })(i);//实参 } //一般方法如下 for(var j=0;j&
第十篇 while 循环 do whlile 少部分时候用于服务器的请求响应监听
weixin_45156213的博客
11-25 129
while 循环 package com.whs.day04; /** * @Author: 阿波罗 * @Date: 2021/11/25 18:47 * @oath: 不分白天黑夜的征途 淦！ * @Version: 1.0.0 */ public class Demo28While { public static void main(String[] args) { //while循环 int i = 0; while (i&lt
javascript中循环绑定监听事件的解决方案
duomoluo的博客
02-19 1469
javaScript中当在一个for循环中绑定事件时，如果事件响应函数中使用了for循环中的局部变量时，会导致所有响应函数中使用的变量都是最后一次循环中的局部变量的值。         举例（此代码示例参考其他文章，找不到原文链接了）：  for(var i=1;i<=3;i++){ document.getElementById('btn' + i).addE
js监听多个事件_《一文看懂浏览器事件循环》
weixin_39915505的博客
12-01 385
浏览器的事件循环标准是由 HTML 标准规定的，具体来说就是由whatwg规定的，具体内容可以参考event-loops in browser。而NodeJS中事件循环其实也略有不同，具体可以参考event-loops in nodejs我们在讲解事件模型的时候，多次提到了事件循环。 事件指的是其所处理的对象就是事件本身，每一个浏览器都至少有一个事件循环，一个事件循环至少有一个任务队列。循环指的是...
java 监听 循环,zookeeper编程01-循环监听
weixin_39715538的博客
03-14 234
zookeeper可以对某个节点进行监听，监听的事件有以下4种：NodeCreated (节点创建)NodeDeleted (节点删除)NodeDataChanged (节点数据变化)NodeChildrenChanged (子节点变化，包括子节点删除、创建和数据变化)但每个事件只能触发一次，之后监听就不再生效本文介绍怎么实现zookeeper对节点的循环监听，即永久生效1. 流程客户端发起对节点...
js循环添加监听器时 只有最后一个有效
轰炸大鱿鱼的博客
11-11 2680
尝试循环添加div后，循环给这些div添加监听器时，出现了bug，现象为只有循环中的最后一个监听器有效，该问题涉及到闭包，引用这篇博文中的第一个方法解决，下次遇到可参考: http://blog.csdn.net/playboyanta123/article/details/17241597
python循环点击按钮_【Python】Tkinter的 for 循环 Button 中监听事件的总结
weixin_36108931的博客
12-23 1899
在 Python 的Tkinter库中，事件监听常用两种方式:Button 的 command，然后command 指向一个具体的函数，可以通过lambda 传参，bind 函数，可以绑定单击、双击多种操作，但是传参需要用到额外的库 functools首先看一组 for 循环里 创建的 Button， 如果想要监听事件，需要用到 lambda 匿名函数，看一下例子：def createGameUR...
js基础学习资料！for循环，监听事件
加金开发
07-12 432
for循环 for (语句 1; 语句 2; 语句 3)   {   被执行的代码块   } 语句 1 在循环（代码块）开始前执行 语句 2 定义运行循环（代码块）的条件 语句 3 在循环（代码块）已被执行之后执行 For/In 循环 JavaScript for/in 语句循环遍历对象的属性： 实例 var person={fname:"John",lname:"Doe
html怎么实现事件监听,js事件监听的几种方式
weixin_33662430的博客
06-05 3788
js作为事件驱动的语言，那对事件的监听必不可少，那么在前端浏览器中有几种事件监听的方式呢。1.html内联属性该方式的缺点就是和html耦合高，尽量少使用2.dom属性绑定 hello var obj = document.getElementByClassName('title');obj[n].onclick = function() {alert('hello');}该方式的缺点是只能绑定一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值