js里面动态绑定按钮单击事件

缘与缘 2013-08-24 04:42:48

背景：一共有四个按钮，我想通过在window.onload里面加载时动态绑定按钮的单机事件。
代码如下：
window.onload = function myfunction() {
inputs = document.getElementsByTagName("input");
alert(inputs.length);
//动态绑定按钮点击事件//单数如何传递参数进去
for (var i = 2; i < inputs.length - 1; i++)
{
//绑定事件//现在是这么绑定的等到实际调用的时候这个全部i==6l所以问题出现在这里
//如何循环绑定时间
inputs[i].onclick = function () {
f1(inputs[i]);
}
}
}
//这样绑定是没有任何问题。
问题：
程序加载的时候并不会执行funtion里面的内容//所以导致运行时i已经是最后一个数//所以用于都是调用的同一个函数也就不能够区分是那个按钮按下。
想要的解决方案：
怎样实现按钮的动态绑定。

...全文

10609 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

a1107151332 2013-08-30

打赏
举报

用委托。。。。

hch126163 2013-08-26

打赏
举报

inputs[i].onclick = function () { f1(this); }

阿鱼 2013-08-25

打赏
举报


（1）闭包有一个重要的特性就是：在引用外部函数的变量时，取外部函数变量的最终值。
在你的例子中，onclick函数就是一个闭包，它的外部函数就是onload函数，当你真正去点击input的时候，onclick函数才执行并引用onload函数中的变量i,但是此时onload函数已经执行完毕，i的最终值已经变成（inputs.length - 1），所以根据上述闭包特性，不管你点击哪个input，onclick函数引用的i的值都是（inputs.length - 1）。
（2）一般情况，都是利用匿名函数来解决的，即：每for一次，便立即将当前的i值赋给相应的input的onclick函数。如下：
window.onload = function myfunction() {
            inputs = document.getElementsByTagName("input");
            alert(inputs.length);

            for (var i = 2; i < inputs.length - 1; i++)
            {
              (function(n){
                  inputs[n].onclick = function () {
                    f1(inputs[n]);
                  }
               })(i);
            }
}

这样，当onclick函数再执行的时候，它引用的就已经不是onload函数中的i了，而是匿名函数中的n，而每for一次，便有一个匿名函数立即用i传参并执行，所以每个匿名函数中的n都是不一样的，都对应着当前的i。

某黑 2013-08-25

打赏
举报

楼上正解，用闭包，再把i作为参数传进去

某黑 2013-08-25

打赏
举报

引用 4 楼 qwklove 的回复:


（1）闭包有一个重要的特性就是：在引用外部函数的变量时，取外部函数变量的最终值。
在你的例子中，onclick函数就是一个闭包，它的外部函数就是onload函数，当你真正去点击input的时候，onclick函数才执行并引用onload函数中的变量i,但是此时onload函数已经执行完毕，i的最终值已经变成（inputs.length - 1），所以根据上述闭包特性，不管你点击哪个input，onclick函数引用的i的值都是（inputs.length - 1）。
（2）一般情况，都是利用匿名函数来解决的，即：每for一次，便立即将当前的i值赋给相应的input的onclick函数。如下：
window.onload = function myfunction() {
            inputs = document.getElementsByTagName("input");
            alert(inputs.length);

            for (var i = 2; i < inputs.length - 1; i++)
            {
              (function(n){
                  inputs[n].onclick = function () {
                    f1(inputs[n]);
                  }
               })(i);
            }
}

似梦飞花 2013-08-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload = function myfunction() { inputs = document.getElementsByTagName("input"); alert(inputs.length); //动态绑定按钮点击事件//单数如何传递参数进去 for (var i = 0; i < inputs.length ; i++) { //绑定事件//现在是这么绑定的等到实际调用的时候这个全部i==6l所以问题出现在这里 //如何循环绑定时间 (function(x){inputs[i].onclick = function () { alert(x); } })(i) } } </script> </head> <body> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="4" /> <input type="button" value="5" /> </body> </html>

街头小贩 2013-08-24

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="button" name="btn1" value="btn1" />
<input type="button" name="btn2" value="btn2" />
<input type="button" name="btn3" value="btn3" />
<input type="button" name="btn4" value="btn4" />
<input type="button" name="btn5" value="btn5" />
<input type="button" name="btn6" value="btn6" />
<script type="text/javascript">
window.onload = function myfunction() {
            inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++){
                inputs[i].onclick = function () {
                    f1(this);
             	}
            }
}
function f1(ele){
	alert(ele.getAttribute('name'));	
}
</script>
</body>
</html>