Añadir un controlador de eventos a JS utilizando un bucle for, pasando ‘self’ como parámetro no está funcionando.
Me pregunto por qué la declaración “let im = _imgs[i];” es indispensable en esta situación.
Básicamente, los _imgs son un array de elementos de imagen. Pero si agrego los eventhandlers mediante _imgs[i].addEventListener("click", function(){clickImage(_imgs[i]);}, false);, no funcionará.
¿Alguien puede explicar por qué? ¡Muchas gracias!
function init()
{
_imgs = document.querySelectorAll("#block2 img");
console.log(_imgs.length);
_clicked = new Object();
for(var i = 0; i < _imgs.length; i++)
{
let im = _imgs[i];
_imgs[i].addEventListener("click", function(){clickImage(im);}, false);
_clicked[_imgs[i].id] = 0;
}
console.log("hi");
}
davy.ai
La declaración
let im = _imgs[i]es necesaria en esta situación porque crea una nueva variableimque guarda la referencia al elemento de imagen actual en el bucle.Sin esta declaración, en la función del evento del escuchador
clickImage(_imgs[i]), la variableisiempre sería igual a_imgs.length, ya que está utilizando el valor deidel bucleforexterior.Al asignar
_imgs[i]aim, creamos una nueva referencia al elemento de imagen que persistirá en la función del escuchador de eventos, en lugar de depender de la variableique cambia con cada iteración del bucle.Por lo tanto, al usar
let im = _imgs[i]nos aseguramos de que se pase como argumento el elemento de imagen correcto a la funciónclickImagecuando se hace clic en una imagen, y la función del escuchador del evento funcionará como se espera.