Назначение EventListener в цикле

Question

я использую эту строку кода, чтобы добавить прослушиватель событий в моей Div-х, которые создаются с помощью forloop:

for(var i in mail){ 
    //create div 
    parent.addEventListener("click",function(){read_msg(mail[i].id);},false); 
    //append to parent 
} 

Это вызывает проблему mail[i].id быть последним идентификатор для всех их. Я прочитал несколько примеров того, как его решить, но я считаю, что это все еще очень запутанно.

мне предложили решение:

(function(){read_msg(mail[this].id)}).bind(i); 

Но я сказал это не большое решение, чтобы использовать, надеялся, кто-то может объяснить, как вы получите read_msg держать правильное значение id? Это всегда кажется немного беспорядочным с точки зрения решения.

Answer 1

Это потому, что вы используете переменную замыкания i в функции обработчика события.

Переменная i находится в области внешней функции, то есть имеется только один экземпляр переменной i. Когда вызывается метод обработчика и вызывается i, javascript сначала рассмотрит область действия функции обработчика, если она не найдет переменную там, она будет смотреть на области закрытия родительского объекта, а затем найдет переменную в родительской области.

В родительской области значение продолжает изменять значение i по мере выполнения цикла, поэтому весь обратный вызов имеет то же значение для i.

Решение здесь состоит в создании локальной закрытости

for(var i in mail){ 
    (function(myvar){ 
     parent.addEventListener("click",function(){read_msg(mail[myvar].id);},false); 
     //append to parent 
    })(i); 
} 

Вот что мы делаем мы имеем сразу запущенную функцию Expression, к которому мы передаем значение i в качестве параметра myvar. Поэтому каждая итерация в цикле создаст независимое закрытие.

Answer 2

вы можете использовать методы объектов + массивов в большинстве браузеров в сторону шага объема надоедливого цикла «ошибка» в JS:

function addClick(key){ 
    //create div 
    parent.addEventListener("click",function(){read_msg(mail[key].id);},false); 
    //append to parent 
} 

Object.keys(mail).forEach(addClick); 

поскольку функции имеют объем и Foreach съедает функцию, вам не нужен extra anon wrapper, когда вы используете методы Array.

если вы хотите идти на все новые JS жаркость:

function addClick(key){ 

    parent.addEventListener("click", this.method.bind(this.elm, this.source[key].id), false); 

} 

Object.keys(mail).forEach(addClick, {elm:parent, source: mail, method:read_msg }); 

где вы меняете исходный объект ключа, чтобы разрешить использование других, чем «почта» объекты, элементы, кроме «родителя» пристроить события а также методы, отличные от «read_msg», без необходимости касаться логики или использовать слово «return» ... В принципе, независимо от того, что вы настраиваете в традиционном инициализаторе цикла C-стиля, вы переходите к this.something и повторите применение логики по мере необходимости.

Answer 3

Поскольку каждая анонимная функция, которую вы определяете как обработчик события с каждой итерацией цикла, будет обладать той же областью, что и все остальные, все они будут ссылаться на тот же var (i), что и адрес массива для сообщения, которое вы пытаетесь отобразить , Поскольку вы переопределяете var i с каждым циклом, вы всегда увидите последнее сообщение в вашем массиве сообщений, отображаемое в каждом событии клика, потому что последнее значение, присвоенное i, будет длиной вашего массива «mail».

Вот как это исправить:

var helper = function(index) { 
    parent.addEventListener("click", function(){read_msg(mail[index].id);},false); 
} 

for(var i in mail) { 
    helper(i); 
}