html 怎么绑定闭包里的事件,JavaScript绑定事件时的闭包问题

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

functionbindEvent(){var letters = [‘A‘,‘B‘,‘C‘];var elems = document.getElementById(‘panel‘).getElementsByTagName(‘div‘);var len=elems.length;for(var i=0; i

elems[i].οnclick= function(){

alert(letter);

}

}

}

但我们点击每个div，发现alert的都是字母C。

分析：我们绑定的事件就是bindEvent函数的内部函数，因此一次确定的点击，函数才会去真正执行它内部的语句，访问letter,现在这个时候它会去他的外部函数(bindEvent)中去找值，显然这个时候bindEvent早就执行过了，最后letter的值就是C,这样在点击每个div的时候结果就都一样l了。

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

functioncreateFunction(letter){return function(){

alert(letter);

}

}functionbindEvent(){var letters = [‘A‘,‘B‘,‘C‘];var elems = document.getElementsByTagName(‘div‘);for(var i=0,len=elems.length; i

elem[i].οnclick=createFunction(letter);

}

}

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

functionbindEvent(){var letters = [‘A‘,‘B‘,‘C‘];var elems = document.getElementsByTagName(‘div‘);for(var i=0,len=elems.length; i

(function(){var letter =letters[i];

elem[i].οnclick= function(){

alert(letter);

}

})();

}

}

原文：http://www.cnblogs.com/likers/p/3937436.html