JS闭包导致循环给按钮添加事件时总是执行最后一个

最新推荐文章于 2020-03-16 18:37:11 发布
转载 最新推荐文章于 2020-03-16 18:37:11 发布 · 363 阅读 · 0
文章标签：

#闭包 #javascript

本文介绍了一种使用JavaScript为页面上的按钮绑定点击事件的方法。通过获取页面元素并利用循环为每个按钮设置点击事件，当点击这些按钮时，可以弹窗显示对应的编号。

  • 按钮1
  • 按钮2
  • 按钮3
  • 按钮4
  • 按钮5


比如现在要实现这么一个功能，在页面上点击上面的按钮1到按钮5时分别alert出1,2,3,4,5.

那么很多人自然想到如下这么做：
加入如下脚本代码：

var list_obj = document.getElementsByTagName('li'); for (var i = 0; i
获取UGUI子节点在Canvas的屏幕坐标
狼行天下
12-15 3200
因为项目需要，需要我们能够在Canvas下获取UI子结点在2D屏幕中的坐标位置。这个子结点可以是嵌套的，如图，注意RectTransform中的Pos值 获得的2D坐标是以屏幕坐标的，比如你的Canvas是1024*768，中间的点就是（0,0），左偏移100，就是（-100,0）。在某牛看到一篇帖子给出的方案是调用 RectTransformUtility.ScreenPointToLo
循环按钮添加事件总是执行最后一个的解决办法汇总
oiu1010110的博客
03-17 1727
当我想要给一组链接添加点击事件,改变当前点击的链接的字体颜色时，很快这样的代码出现了，并且是确实成功改变了当前的点击的字体的颜色。 HTML: 按钮1 按钮2 按钮3 按钮4 按钮5 按钮6 按钮7 按钮8 按钮9 JS： window.onload = function () { var aa = document.getElementsByTagNa
每日bug-- js jquery 循环中绑定click 事件
weixin_41705396的博客
03-16 1699
测试的思路 1）定义一个数组 2）遍历数组：生成 button 3）button 的点击事件 输入 数组的值 测试代码一 <script type="text/javascript"> function fun01(){ let myArr=new Array(); myArr[0]=0; myArr[1]=1; ...
js批量添加事件监听，用于处理tab标签选中的一个示例
与其用泪水悔恨昨天，不如用汗水拼搏今天
08-29 2723
之前每次网上找的好看的控件都不知道如何切换标签，因为通常提供的都是html，需要自己写js，无从下手，本次通过自己的理解学会了一个tab页面的激活与取消（简单的方法，以前的方法很笨拙），通过js遍历添加事件监听的方式，无论你有多少个tab页面都无需修改js了，自动适应。 例子是使用了SUI的一个工具栏，提供了3个按钮，自己给了3个tab content与之一一对应，通过点击工具栏的按钮实现工具栏...
addEventListener 第三个参数
weixin_30522183的博客
03-09 207
addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(type, listener[, useCapture]); target.addEventListener(type, listener[, useCapture, wantsUntr...
浅谈JS闭包中的循环绑定处理程序
12-10
本文将深入探讨一个常见的闭包问题——循环绑定处理程序，即在遍历元素并为它们添加事件监听器时可能出现的问题，并提供几种解决方案。 在初始的例子中，开发者尝试为四个按钮（id分别为btn1到btn4）添加点击事件，...
javascript闭包传参和事件的循环绑定示例探讨
10-26
在描述中提到循环绑定事件的问题，通常是指在循环结构中给事件处理器（比如按钮的点击事件）绑定函数时，遇到的一个常见问题。问题的核心在于JavaScript中的变量作用域，以及事件监听器是异步执行的，但循环的变量会...
js闭包引起的事件注册问题介绍
10-22
为了更好地理解这个问题，我们可以添加一个断点并在`i==2`时暂停执行： ```javascript function pageLoad() { for (var i = 1; i ; i++) { var anchor = document.getElementById("anchor" + i); anchor.onclick...
分析js闭包引起的事件注册问题
10-22
在描述中，作者指出了一个常见的误区，即在for循环中为DOM节点注册事件时，由于闭包的特性，导致了事件处理器绑定到了不期望的值。作者解释说，在循环过程中，变量i的引用被保存在了事件处理器中，而当事件处理器被...
for循环绑定监听事件索引值总是最后一个
acm765152844的博客
02-26 3341
var Menu=$(".tab"); for(var i=0;i    $(".tab").eq(i).onclick=function(){          $(".tabContent").css("display","none");          $(".tabContent").eq(i).css("display","block");           }
JS循环中给对象添加事件addEventListener的用法
无名小仙男的博客
09-06 3880
在做百度迁徙图的时候遇到： 循环中使用addEventListener方法，给各个marker对象增加点击事件， 顺便记录下百度地图的东西，整段代码都贴过来吧。。。。 // 百度地图API功能 var map = new BMap.Map(&quot;allmap&quot;, {enableMapClick: false});//构造地图时，关闭地图可点功能 map.enableScrollWheelZoom...
jquery循环绑定事件有一个坑----总是绑定最后一个元素
budapest的专栏
08-04 4416
1. 先看一段用jquery循环绑定事件的代码，要求是对每个元素都作事件绑定。结果在绑定事件中只能得到最后一个值，如下代码片段1所示： var checkMutipleChoices=[{questionId:7547,maxNum:2},{questionId:7553,maxNum:3}]; for(var i=0;i<checkMutipleChoices.length;i++){
Jquery 中 循环遍历 选择器 each（）
霍常国的博客
03-09 8496
$(document).ready(function(){ $("button").click(function(){ $("li").each(function ( index,element){ alert(index); alert(element); alert($(this).text()) }); }); }); 输出每个列表项的值 Coffee
给按钮添加点击事件 js
最新发布
10-14
在 JavaScript 中，给按钮添加点击事件有多种方法，以下是几种常见的方式： ### 方法一：使用 `onclick` 属性 可以通过设定按钮的 `onclick` 属性来给按钮绑定 `onclick` 事件。示例代码如下： ```html <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </head> <body> <h1>My First JavaScript</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html> ``` 这种方式直接在 HTML 标签中指定了点击按钮时要执行的 JavaScript 函数，简单直接，但 HTML 和 JavaScript 代码耦合度较高[^3]。 ### 方法二：使用 `addEventListener` 方法 可以使用 `addEventListener` 函数来监听按钮的点击事件，并在事件发生时执行相应的代码。示例代码如下： ```html <!DOCTYPE html> <html> <body> <button id="myButton">点击我</button> <script> // 获取按钮元素 var button = document.getElementById("myButton"); // 添加点击事件监听器 button.addEventListener("click", function () { alert("按钮被点击了！"); }); </script> </body> </html> ``` 这种方式将 HTML 和 JavaScript 代码分离，代码结构更清晰，并且一个元素可以添加多个事件监听器[^2]。 ### 方法三：使用闭包给多个按钮添加点击事件 当有多个按钮，需要给每个按钮添加点击事件，并且在点击按钮时能够获得当前按钮的下标，可以使用闭包来实现。示例代码如下： ```html <!DOCTYPE html> <html> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> window.onload = function () { // 获取所有按钮 var obtns = document.getElementsByTagName("button"); // 通过循环给每个按钮添加点击事件 for (var i = 0; i < obtns.length; i++) { obtns[i].onclick = (function (index) { return function () { alert(index); } })(i); } } </script> </body> </html> ``` 在这个例子中，通过闭包保存了每个按钮的索引，使得点击按钮时能正确显示其下标[^1]。 ### 方法四：使用 `this` 关键字 可以利用 `this` 关键字来引用当前被点击的按钮元素。示例代码如下： ```html <!DOCTYPE html> <html> <body> <button onclick="handleClick(this)">按钮</button> <script> function handleClick(button) { alert("你点击了按钮：" + button.textContent); } </script> </body> </html> ``` 在这个例子中，`this` 关键字在 `onclick` 事件处理函数中指向当前被点击的按钮元素，从而可以对该按钮进行操作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值