JavaScript利用闭包解决循环绑定事件

weixin_30387799

于 2014-10-12 19:50:00 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jellybaobao/p/4020956.html

版权

例子：

<!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].οnclick=function(){alert(i)};
    }
}
function alertFunc(i){
    this.clickFunc=function(){alert(i)};
    
}
</script>