JavaScript 绑定事件时的闭包问题

在写网页的时候，我们经常需要为一组DOM元素绑定同一事件，比如页面上有3个div，我们给他们绑定一个click事件来alert数组letters中和他们序号对应的字母：

 function bindEvent(){
            var letters = ['A','B','C'];
            var elems = document.getElementsByTagName('div');
            var len=elems.length;
            for(var i=0; i<len; i++){
                var letter = letters[i];
                elems[i].onclick = function(){
                    alert(letter);
                }
            }
 }

但我们点击每个 div ，发现 alert 的都是字母C。
分析：我们绑定的事件就是 bindEvent 函数的内部函数，因此一次确定的点击，函数才会去真正执行它内部的语句，访问 letter ，现在这个时候它会去他的外部函数

（bindEvent）中去找值，显然这个时候 bindEvent 早就执行过了，最后letter的值就是C，这样在点击每个div的时候结果就都一样了。


该如何解决这个问题呢，我们可以尝试使用一个函数，把每次的定值传出闭包

function createFunction(letter){
    return function(){
        alert(letter);
    }
}

function bindEvent(){
    var letters = ['A','B','C'];
    var elems = document.getElementsByTagName('div');
    for(var i=0,len=elems.length; i<len; i++){
        var letter = letters[i];
        elems[i].onclick = createFunction(letter);
    }
}
 


这里再提供一种方法，如果对()操作符、作用域、匿名函数理解得比较好就很容易理解下面这种写法，也就是利用(function(){…})();来隔离作用域或者说闭包嵌套，
相当于作了三个匿名函数来做事件的外部函数，在绑定的时候他们就分别寄存了对应的letter

function bindEvent(){
    var letters = ['A','B','C'];
    var elems = document.getElementsByTagName('div');
    for(var i=0,len=elems.length; i<len; i++){
        (function(){
            var letter = letters[i];
            elems[i].onclick = function(){
                alert(letter);
            }
        })();
    }
}

or:

function bindEvent(){
    var letters = ['A','B','C'];
    var elems = document.getElementsByTagName('div');
    for(var i=0,len=elems.length; i<len; i++){
        (function(k){
            elems[k].onclick = function(){
                alert(letter[k]);   //将 i 传进来给 k，使得在绑定的函数内部可以访问 i 。
            }
        })(i);
    }
}