Как правильно повесить обработчик события?

Question

[ince]

Почему такой способ не срабатывает:

element = document.querySelector('#button');				
	element.addEventListener( "click" ,  myFunc('arg') );

а такой работает:

element = document.querySelector('#button');				
	element.addEventListener( "click" , function () { myFunc('arg') });

Где логика?

Answer 1

[Владимир Проскурин]

Потому, что в первом случае вы передаете возвращаемое значение функции, а во втором функцию, которую нужно выполнить.
т.е. element.addEventListener ожидает вторым аргументом функцию, которую следует выполнить. Вот этот кусок
myFunc('arg')
это вызов функции с аргументом 'arg', вызов функции будет произведен сразу, и его результат (который будет передан в return функции) будет передан в element.addEventListener. Вы конечно же можете в myFunc вернуть функцию, тогда будет работать.
также можно написать так

element.addEventListener( "click" ,  myFunc.bind(null, 'arg') );

метод bind создает и возвращает функцию обертку, при вызове которой, в нее будет подставлен аргумент 'arg'.

Answer 2

[DanKud]

Потому что нужно передавать саму функцию - element.addEventListener('click', myFunc) а не запускать ее выполнение. Отправляя myFunc('arg') вы сразу же запускаете выполнение функции. Чтобы отправить параметры функции в обработчик нужно привязать контекст через .bind, как уже вам написали в примере выше, либо использовать метод .handleEvent из интерфейса EventListener:

function myFunc(event) {
    console.log(this.arg);
}
.....
element.addEventListener('click', {
    handleEvent: myFunc,
    arg: 'arg_value'
});