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

    });

}


我有一堆(数百个)span元素,其ID为数字(从0开始,以1递增)。此循环应该执行的操作是为所有span元素(都具有char类)创建mouseover事件侦听器。一旦将鼠标悬停在它上面,它就应该执行mouseoverCheck()函数,并传入创建该事件侦听器时的i。因此,第203个事件侦听器应传入203。但事实并非如此。现在,它将传入我认为是循环完成之前的最后一个值i

我试图使用IIFE和闭包以确保每个事件侦听器在创建时都获得i的值,而不是调用该函数时的值。显然,我没有正确执行操作,但是我可以肯定的是,关闭是解决问题的关键。任何人都可以阐明如何正确执行此操作吗?我以为我了解闭包,但显然我不知道...

最佳答案

它不起作用,因为

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

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

    });


addEventListener()只是分配一个处理程序,到该处理程序被称为i时将为6。

您应该从IIFE返回处理程序

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/

08-25 11:54
查看更多