Блог

Главная - Вопросы по программированию - Как использовать замыкания для создания прослушивателей событий в цикле Javascript for?

Как использовать замыкания для создания прослушивателей событий в цикле Javascript for?

#javascript #dom-events

Вопрос:

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



lt;/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  элементов с номерами в качестве идентификаторов (начиная с 0 и увеличивая на 1). Что должен делать этот цикл, так это создавать прослушиватели событий наведения курсора мыши для всех  span  элементов (все они имеют класс  char  ). После того, как он будет включен, он должен исключить  mouseoverCheck()  функцию и передать все, что  i  было, когда был создан этот прослушиватель событий. Таким образом, 203-й прослушиватель событий должен пройти  203  . Но это не так. Прямо сейчас он передает то, что я считаю последним значением  i  перед завершением цикла.


Я пытался использовать IIFE и закрытие, чтобы убедиться, что каждый прослушиватель событий получил  i  значение в момент его создания, а не его значение при вызове функции. Ясно, что я сделал это неправильно, но я совершенно уверен, что закрытие-это ключ к моей проблеме. Может ли кто-нибудь пролить свет на то, как это сделать правильно? Я думал, что понял завершение, но, очевидно, это не так…




Комментарии:


1.  Попробуйте это:     jsfiddle.net/5wg835m6    


2.  Если все, что вам действительно нужно, — это номер индекса, я бы не стал использовать закрытие.   Я бы просто поместил индекс непосредственно на элемент DOM:    charElems[i].__index = i;    а затем использовал    mouseoverCheck(this.__index)    


Ответ №1:




это не работает, потому что


 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/




Комментарии:


1.  В предоставленной скрипке есть некоторые синтаксические ошибки.   Попробуйте это:     jsfiddle.net/5wg835m6    


2.  @RayonDabre я забыл обновить изменения ,спасибо за указатель  


3.  Так что, оказывается, мое непонимание было связано с тем, как работают слушатели событий, а не с закрытием!   Это решило мою проблему, большое спасибо!  


Ответ №2:




 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)


}
 










	Метки: