Nie można przekazać zdarzenia do addEventListener: problem zamknięcia

Question

To doprowadza mnie do szału ... Mam pętlę, która dodaje detektor zdarzeń do obiektu SVG. Obiekt jest, na potrzeby argumentacji, małym kółkiem i muszę dodać zdarzenia mouseover i mouseout dla każdego z 10 okręgów.

Mój pierwszy problem to standardowa rzecz zamknięcia - ponieważ wszystkie słuchacze są dodawane w tej samej pętli, wszystkie widzą tę samą nieprawidłową wartość zmiennej pętli. Mogę to naprawić, jak sądzę, ale drugim problemem jest to, że muszę przekazać "wydarzenie" słuchaczom i nie mogę znaleźć żadnego sposobu, aby rozwiązać oba te problemy jednocześnie.

Próbowałem różne wersje tego:

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

Ta szczególna wersja daje mi „nie jest zdefiniowane zdarzenie”. popup_on to prawdziwy program obsługi, który musi uzyskać event i aktualną wartość month. Jakiś pomysł, jak powinienem to robić? Dzięki.

Answer 1

Zdarzenie zostanie przekazane do Twojej funkcji automatycznie - ustaw jako pierwszy argument funkcji, którą przekazujesz do addEventListener. Ponadto wartość false jest wartością domyślną parametru przechwytywania.

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

Ponadto, jesteś ok z foo jest zamknięta w ciągu zwrotnego zdarzenia? Jeśli nie, można zrobić to samo z nim

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

A jeśli wszystkie te zmienne lokalne są coraz irytujące, można dokonać ich parametry ewentualnie dokonać rzeczy nieco bardziej schludny

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