¿Cómo utilizar cierres para crear escuchas de eventos en un Javascript para bucle?

HTML

? ! " / % $ ... 

JavaScript

 var charElems = document.getElementsByClassName('char'); for (var i=0; i < charElems.length; i++) { charElems[i].addEventListener('mouseover',function() { (function(j) {mouseoverCheck(j);}(i)); }); } 

Tengo un grupo (cientos) de elementos de span con números como ID (comenzando desde 0 y aumentando en 1). Lo que se supone que debe hacer este bucle es crear escuchas de eventos de mouseover para todos los elementos de span (que todos tienen una clase de char ). Una vez superado, debe ejecutar la función mouseoverCheck() y pasar lo que sea que era cuando se creó el detector de eventos. Así que el oyente del evento 203 debería pasar en 203 . Pero no lo hace. En este momento, pasa lo que creo que es el último valor que tenía antes de que se completara el ciclo.

Intenté usar un IIFE y un cierre para asegurarme de que cada oyente del evento obtuviera el valor de i en el momento de su creación, en lugar de su valor cuando se llama a la función. Claramente, no lo hice correctamente, pero estoy bastante seguro de que el cierre es la clave de mi problema. ¿Alguien puede arrojar algo de luz sobre cómo hacer esto correctamente? Pensé que entendía el cierre, pero claro que no …

no funciona porque

 charElems[i].addEventListener('mouseover',function() { (function(j) {mouseoverCheck(j);}(i)); }); 

addEventListener() solo está asignando un controlador y en el momento en que se llame a ese controlador, i tendré 6.

Usted debe devolver un controlador de un 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))); } 

Aquí hay un violín: https://jsfiddle.net/qshnfv3q/

 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) }