No se puede pasar el evento a addEventListener: cierre el problema

Question

Este me está volviendo loco ... Tengo un bucle que agrega un detector de eventos a un objeto SVG. El objeto es, en aras de la argumentación, un círculo pequeño, y tengo que agregar eventos mouseover y mouseout para cada uno de los 10 círculos.

Mi primer problema es el alcance de cierre estándar, ya que todos los oyentes se agregan en el mismo bucle, todos ven el mismo valor no válido de la variable de bucle. Puedo arreglar esto, creo, pero el segundo problema es que tengo que pasar 'evento' a los oyentes, y no puedo encontrar ninguna manera de solucionar estos dos problemas simultáneamente.

He probado varias versiones de esta:

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

Esta versión en particular me da 'caso no está definido'. popup_on es el controlador real, y debe obtener event y el valor actual de month. ¿Alguna idea de cómo debería estar haciendo esto? Gracias.

Answer 1

El evento se pasará a su función automáticamente -solo conviértalo en el primer argumento de la función que pasa al addEventListener. Además, false es el valor predeterminado para el parámetro de captura.

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

Además, ¿estás bien con foo ser cerrado otra vez en su devolución de llamada de eventos? Si no, usted podría hacer lo mismo con él

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

Y si todas estas variables locales son cada vez más molesto, puede hacer que los parámetros para hacer posiblemente las cosas un poco más ordenado

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