Слушатели событий
Для того, чтобы элемент реагировал на действия пользователя, на него необходимо повесить слушателя (обработчик) события. То есть функцию, которая сработает, как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.
Методы elem.addEventListener()
и elem.removeEventListener()
- это современный способ назначить или удалить обработчик, при этом можно использовать сколько угодно обработчиков на одном типе события.
Overview of Events and Handlers
element.addEventListener()
Добавляет слушателя события на элемент.
element.addEventListener(event, handler[, phase])
event
- имя события, строка, напримерclick
handler
- ссылка на функцию, которую надо поставить обработчикомphase
- необязательный аргумент, фаза, на которой обработчик должен сработать. Указывается крайне редко.
2.1.1. addEventListener и this
Если мы передаем функцию, которая использует this
, по умолчанию this
внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод bind
.
const user = {
name: 'Mango',
showName() {
console.log(this);
// this будет ссылаться на button если использовать showName как callback
console.log(`My name is: ${this.name}`);
// undefined так как поля name у button нет
},
};
/*
* Представим что у нас есть кнопка с классом js-btn
* Выберем ее и повесим на нее слушатель клика
*/
const btn = document.querySelector('.js-btn');
user.showName(); //работает
btn.addEventListener('click', user.showName); // не работает
btn.addEventListener('click', user.showName.bind(user)); // работает
element.removeEventListener()
Удаляет слушателя. Аргументы те же, что у addEventListener
.
element.removeEventListener(event, handler[, phase])
Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в addEventListener
. Поэтому для callback
используют отдельную функцию и передают ее по имени.
Last updated