有3个按钮，我们给每个按钮添加点击事件，希望每次点击时输出当前点击的是第几个按钮，但是目前不论点击哪个按钮，最终输出的都是4，代码如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <script> var btn = document.getElementsByTagName("input"); for (var i=0;i<3;i++){ btn[i].onclick = function () { alert(i) } } </script> </body> </html>
没有实现的原因是我们将单击方法定义在了for循环里面，而定义在for循环不能实现的原因是：
（1）因为onclick事件是先绑定再触发的。
（2）执行循环的时候，给每个都绑定了onclick，这个时候i还不全是3，但是到最后点击的时候，循环已经结束了，所以i的值就是循环结束之后的值。
在循环外面封装点击事件，在循环里面调用点击事件，将变量i作为参数传递进来
