Слушатели событий

Для того, чтобы элемент реагировал на действия пользователя, на него необходимо повесить слушателя (обработчик) события. То есть функцию, которая сработает, как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.

Методы 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 используют отдельную функцию и передают ее по имени.

Ссылка на пример в Codepen.io