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

本文介绍了一种使用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
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、付费专栏及课程。

余额充值