@ince

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

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

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


а такой работает:
element = document.querySelector('#button');				
	element.addEventListener( "click" , function () { myFunc('arg') });


Где логика?
  • Вопрос задан
  • 199 просмотров
Решения вопроса 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Потому, что в первом случае вы передаете возвращаемое значение функции, а во втором функцию, которую нужно выполнить.
т.е. element.addEventListener ожидает вторым аргументом функцию, которую следует выполнить. Вот этот кусок
myFunc('arg')
это вызов функции с аргументом 'arg', вызов функции будет произведен сразу, и его результат (который будет передан в return функции) будет передан в element.addEventListener. Вы конечно же можете в myFunc вернуть функцию, тогда будет работать.
также можно написать так
element.addEventListener( "click" ,  myFunc.bind(null, 'arg') );

метод bind создает и возвращает функцию обертку, при вызове которой, в нее будет подставлен аргумент 'arg'.
Ответ написан
Комментировать
@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'
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы