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

背景：一共有四个按钮，我想通过在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已经是最后一个数//所以用于都是调用的同一个函数也就不能够区分是那个按钮按下。
想要的解决方案：
怎样实现按钮的动态绑定。js按钮，动态绑定

解决方案 »

  1.   


    <!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>
      

  2.   

    <!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>
      

  3.   


    （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。
      

  4.   

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