如何使用闭包在Javascript for循环中创建事件侦听器？

HTML

？
!
"
/
%
$
...

JavaScript

<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>
...

var charElems=document.getElementsByClassName（'char'）；
for（var i=0；i

我有一堆（数百）的

span

元素，它们的ID是数字（从0开始，递增1）。这个循环应该做的是为所有

span

元素（它们都有一个

char

类）创建mouseover事件侦听器。一旦鼠标移过，它应该会超过

mouseoverCheck（）

函数并传入创建该事件侦听器时的

i

值。因此第203个事件侦听器应该传入

203

。但它没有传入。现在，它传入了我认为是循环完成之前的最后一个值

i

---

我试图使用一个IIFE和闭包来确保每个事件侦听器在创建时都得到了

I

的值，而不是调用函数时的值。显然，我没有正确地执行此操作，但我相当确定闭包是我问题的关键。有人能解释一下如何正确地执行此操作吗？我想是的理解结尾，但显然我不…

它不起作用，因为

var charElems = document.getElementsByClassName('char');

for (var i=0; i < charElems.length; i++) {

    charElems[i].addEventListener('mouseover',function() {

        (function(j) {mouseoverCheck(j);}(i));

    });

}

addEventListener（）

只是分配了一个处理程序，在调用该处理程序时，

i

将为6

你应该从生活中返回一个处理程序

charElems[i].addEventListener('mouseover',function() {

        (function(j) {mouseoverCheck(j);}(i));

    });

var charElems=document.getElementsByClassName（'char'）；
for（var i=0；i

这里有一个提琴：

var charElems=document.getElementsByClassName（'char'）；
for（var i=0；i

提供的fiddle中存在一些语法错误。请尝试以下操作：@RayonDabre我忘了更新更改，感谢指针，结果发现我对事件侦听器的工作方式存在误解，而不是闭包！这解决了我的问题，非常感谢！尝试以下操作：如果您真正需要的是索引号，我不会使用闭包。我希望st将索引直接放在DOM元素上：

charElems[i]。\uu index=i；

然后使用

mouseoverCheck（this.\uu索引）

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)));
} 

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)


}