JS中循环绑定遇到的问题及解决方法

本文是原创文章，如需转载，请注明文章出处

在工作中，有时会有这样的需求：在一个页面上添加了6个按钮，然后分别为他们绑定点击事件监听器，当点击按钮1时，输出1，当点击按钮2时，输出2。

循环绑定代码如下：

for (var i = 1, i <= 6; ++i){
    var btn = document.getElementById("btn" + i);
    btn.addEventListener("click", function(){
        console.log(i);
    }, false);
}

但是这样会产生一个问题，因为JS中没有块作用域的概念，所以当这段绑定代码执行过后，i的值是7，并且可以在函数外访问到，因此无论点哪个按钮，输出都是7，这并不是我们想要的结果。

解决方法如下：

1.利用闭包将绑定监听器时的i传入函数中，在函数中记录i，当按钮点击时，输出被记录的i。

for (var i = 1; i <= 6; ++i){
    var btn = document.getElementById("btn" + i);
    btn.addEventListener("click", (function(){
        var id = i;
        return function(event){
            console.log(id);
        };
    })(i), false);
}

2.利用函数的bind方法，将i作为参数传入函数，同样在函数中记录i，当按钮点击时，输出被记录的i。

for (var i = 1; i <= 6; ++i){
    var btn = document.getElementById("btn" + i);
    btn.addEventListener("click", onBtnClick.bind(onBtnClick, i), false);
}

function onBtnClick(id){
    console.log(id);
}

这样改了之后，输出就是我们想要的结果了。