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~

posted @ 2014-10-12 19:50  苜冉冉  阅读(261)  评论(0)  编辑  收藏  举报