przesyłanie argumentu do funkcji wewnątrz EventListenera

Question

Mam EventListenera podpiętego do 18 obrazków:

var imgs = document.querySelectorAll("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    imgs[i].addEventListener("click", fn);
}

Problem w tym, że funkcja "fn" będzie musiała wiedzieć który obrazek został kliknięty. Myślałem żeby wysłać jej zmienną "i" jako argument lecz kompletnie nie wiem jak to zrobić wewnątrz EventListenera.

Comments

W EventListenerze umieść anonimową funkcję, w której dopiero wywołasz swoją funkcję z przekazaniem parametru:

imgs[ i ].addEventListener( "click", function() {
  fn( i );
} );

Zalecam również zmianę var na const / let, bo możesz się "nadziać na problem" z closure:

(akapit Saving state with closures) http://benalman.com/news/2010/11/immediately-invoked-function-expression/

http://www.2ality.com/2015/02/es6-scoping.html#%3Ccode%3Elet%3C%2Fcode%3E_in_loop_heads

http://www.mennovanslooten.nl/blog/post/62

Answer 1

Musisz mieć numer indeksu konkretnego obrazka czy starczy Ci odwołanie do samego obrazka? Bo jeśli to drugie, to każdy handler dostaje jako 1. parametr obiekt zdarzenia, a w nim kliknięty element jest we własności target:

function fn( evt ) {
    console.log( evt.target ); // Odwołanie do klikniętego obrazka.
}

 

Comments

Numer indeksu ;). Ale poradziłem sobie już metodą podaną przez Krzycho92 w komentarzu. Podaje kod, może komuś się kiedyś przyda:

  var imgs = document.getElementsByClassName("klasa_elementow");
    for (var i = 0, len = imgs.length; i < len; i++){
      (function( lockedInIndex ){
      imgs[i].addEventListener("click", function(e) {
        e.preventDefault();
        fn(lockedInIndex);
      }, 'false' );
    })( i );
}