如何使用闭包在Javascript for循环中创建事件侦听器？
如何使用闭包在Javascript for循环中创建事件侦听器？
提问于 2015-12-23 13:15:47
HTML
<span class="char" id="0">?</span>
<span class="char" id="1">!</span>
<span class="char" id="2">"</span>
<span class="char" id="3">/</span>
<span class="char" id="4">%</span>
<span class="char" id="5">$</span>
...JavaScript
var charElems = document.getElementsByClassName('char');
for (var i=0; i < charElems.length; i++) {
charElems[i].addEventListener('mouseover',function() {
(function(j) {mouseoverCheck(j);}(i));
});
}我有一堆(数百个)以数字为ID的span元素(从0开始，以1递增)。这个循环要做的是为所有的span元素(它们都有一个char类)创建mouseover事件侦听器。鼠标移过后，它应该执行mouseoverCheck()函数，并传入创建该事件侦听器时的i。因此，203个事件侦听器应该传入203。但事实并非如此。现在，它传入了我认为是i在循环完成之前的最后一个值。
我试图使用生命和闭包来确保每个事件侦听器在创建时获得i的值，而不是在调用函数时获得它的值。显然，我没有做对，但我相当确定闭包是解决我问题的关键。有人能解释一下如何正确地做到这一点吗?我认为我理解了闭包，但很明显我不了解……
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-23 13:23:38
它不能工作是因为
charElems[i].addEventListener('mouseover',function() {
(function(j) {mouseoverCheck(j);}(i));
});addEventListener()只是分配了一个处理程序，在调用该处理程序时，i将为6。
你应该从生命中返回一个操纵者
var charElems = document.getElementsByClassName('char');
for (var i=0; i < charElems.length; i++) {
charElems[i].addEventListener('mouseover', (function(temp) {
return function(){
var j = temp;
//mouseoverCheck(j);
console.log(temp);
}
}(i)));
} 这里有一个小提琴：https://jsfiddle.net/qshnfv3q/
Stack Overflow用户
发布于 2015-12-23 13:50:29
var charElems = document.getElementsByClassName('char');
for (var i = 0; i < charElems.length; i++) {
//close...
//charElems[i].addEventListener('mouseover',function() {
// (function(j) {mouseoverCheck(j);}(i));
//});
//like this
(function(el, x) {
el.addEventListener("mouseover", function() {
mouseoverCheck(x);
});
})(charElems[i], i)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34429064
复制相关文章
相似问题