JavaScript绑定事件时的闭包问题
2009-05-26 20:33
573 查看
在写网页的时候,我们经常需要为一组DOM元素绑定同一事件,比如页面上有3个div,我们给他们绑定一个click事件来alert数组letters中和他们序号对应的字母:
function bindEvent(){
var letters = ['A','B','C'];
var elems = document.getElementById('panel').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的时候结果就都一样l了。
该如何解决这个问题呢,我们可以尝试使用一个工厂函数,把每次的定值传出闭包
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];
elem[i].onclick = createFunction(letter);
}
}
这里再提供一种方法,如果对()操作符、作用域、匿名函数理解得比较好就很容易理解下面这种写法,也就是利用(function(){…})();来隔离作用域或者说闭包嵌套,相当于作了三个匿名函数来做事件的外部函数,在绑定的时候他们就分别寄存了对应的letter,是不是很有趣呢:)
function bindEvent(){
var letters = ['A','B','C'];
var elems = document.getElementById('panel').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的时候结果就都一样l了。
该如何解决这个问题呢,我们可以尝试使用一个工厂函数,把每次的定值传出闭包
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];
elem[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]; elem[i].onclick = function(){ alert(letter); } })(); } }
相关文章推荐
- JavaScript绑定事件时的闭包问题
- JavaScript 绑定事件时的闭包问题
- javascript中循环加载监听事件的闭包问题
- JavaScript call apply使用——JavaScript对象的方法绑定到DOM事件后this指向问题
- JavaScript中给onclick绑定事件后return false遇到的问题
- javascript attachEvent绑定多个事件执行顺序问题
- javascript 冒泡 解决过多节点绑定事件的问题
- javascript中的事件绑定兼容性问题浅析
- JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案
- JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
- js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题
- 如果理解Javascript利用闭包循环绑定事件
- javascript事件绑定后this变义问题的解决[prototype1.5.1]
- javascript 闭包 导致 的 重复 绑定 事件
- JavaScript闭包-循环添加onfocus事件出问题
- javascript 循环遍历绑定事件问题
- JS中批量给元素绑定事件过程中的相关问题使用闭包解决
- JS中批量给元素绑定事件过程中的相关问题使用闭包解决
- javascript 事件绑定问题