Не удается передать событие в addEventListener: проблема закрытия - PullRequest
Новая
       25

Не удается передать событие в addEventListener: проблема закрытия

11 голосов
/ 03 января 2012

Это сводит меня с ума ... У меня есть цикл, который добавляет прослушиватель событий к объекту SVG.В качестве аргумента объект представляет собой небольшой кружок, и мне нужно добавить события mouseover и mouseout для каждого из 10 кружков.

Моя первая проблема - это стандартная область замыкания - потому что всеслушатели добавляются в один и тот же цикл, все они видят одно и то же недопустимое значение переменной цикла.Думаю, я могу это исправить, но вторая проблема заключается в том, что мне нужно передать «событие» слушателям, и я не могу найти способ исправить обе эти проблемы одновременно.

Я пыталсяразличные версии этого: 

for(month = 0; month < nMonths; month++) {
   ...
   shape.addEventListener(
     "mouseover", 
     (function(event, index) { popup_on(event, foo, index); })(event, month),
     false);
   group.appendChild(shape);
}

Эта конкретная версия дает мне «событие не определено».popup_on - настоящий обработчик, и он должен получить event и текущее значение month.Есть идеи, как мне это сделать?Спасибо.

1 Ответ

18 голосов
/ 03 января 2012

Событие будет передано вашей функции автоматически - просто сделайте его первым аргументом функции, которую вы передаете addEventListener.Кроме того, false является значением по умолчанию для параметра захвата. 

(function() {
    var i = month;
    shape.addEventListener("mouseover", function(e) { popup_on(e, foo, i); });
})();

Кроме того, вы согласны с закрытием foo в обратном вызове вашего события?Если нет, то вы можете сделать то же самое с ним 

(function() {
    var i = month;
    var f = foo;
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})();

И если все эти локальные переменные становятся раздражающими, вы можете сделать их параметрами, чтобы сделать вещи немного более аккуратными 

(function(i, f) {
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); });
})(month, foo);
...