JavaScript利用闭包解决循环绑定事件
例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button></button> <button></button> <button></button> </body> <script type="text/javascript"> window.onload=function(){ var btns=document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++){ btns[i].onclick=function(){alert(i)}; } } </script> </html>
执行结果是,每一个按钮点击后弹出的都是3;
因此我们利用闭包的特性来解决循环绑定时,i变量赋值的问题,修改script部分代码如下:
<script type="text/javascript"> window.onload=function(){ var btns=document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++){ var col = new alertFunc(i); btns[i].onclick=col.clickFunc; //btns[i].onclick=function(){alert(i)}; } } function alertFunc(i){ this.clickFunc=function(){alert(i)}; } </script>
success~