Почему почему код срабатывает хотя должен работать только по клику?

Question

[Андрей Федоров]

На странице много миниатюр с классом imgresize-wrapper. Нужно слушать клик на миниатюру, чтобы показать увеличенную версию картинки. Делаю это так:

function imgResize(a) {
	a.classList.toggle('imgresized');
}
var z = document.querySelectorAll('.imgresize-wrapper');
for(x = 0; x < z.length; x++) {
	z[x].addEventListener('click', imgResize(z[x]));
}

Однако сразу показываются полные версии изображений, не дожидаясь клика.
Где я ошибся?

Comments

[Hyubert]

потому что вы функцию сразу вызываете, вот тут
z[x].addEventListener('click', imgResize(z[x]));
попробуйте так

z[x].addEventListener('click', imgResize.bind(this, z[x]));

Answer 1

[Павел Корнилов]

function imgResize(a) {
  a.classList.toggle('imgresized');
}
var z = document.querySelectorAll('.imgresize-wrapper');
for(x = 0; x < z.length; x++) {
  z[x].addEventListener('click', imgResize.bind(null, z[x])));
}

Потому, что событию клик передаётся не исполняемая функция, а уже результат её исполнения. Можно решить либо через замыкание, либо как я указал выше.

Comments

[Андрей Федоров]

Ваш вариант сработал, несмотря на лишние скобки.

Про bind я совсем не знал. Но меня была мысль

z[x].addEventListener('click', function() {imgResize(z[x]))

Но я не смог пробросить z[x] во внутренюю функцию. Это в принципе возможно?

[Павел Корнилов]

Андрей Федоров, это и есть пример замыкания в анонимную функцию.
Скобки не считал - скопировал код из вопроса и правил прямо здесь. В редакторе уже подправьте, причешите.

Пробросить переменную можно попробовать так:

z[x].addEventListener('click', function(e, z[x]) {imgResize(arguments[1]))

[Андрей Федоров]

Павел Корнилов, спасибо большое.

[Павел Корнилов]

Андрей Федоров, на здоровье!

Вот вариант с замыканием - https://codepen.io/KorniloFF/pen/ZwGdGd?editors=1010

[Павел Корнилов]

Андрей Федоров, а вот так правильно использовать одно событие на родителе списка - вместо навешивания на каждый элемент. Называется - делегирование.

https://codepen.io/KorniloFF/pen/exNwrJ?editors=1011

Answer 2

[Евгений Акулинин]

Потому что в addEventListener передается не функция-обработчик, а ее результат. Нужно изменить так

for(x = 0; x < z.length; x++) {
  z[x].addEventListener('click', imgResize.bind(null, z[x]));
}