Javascript addEventListener: простой способ обработки событий

Javascript addEventListener представляет собой метод, который позволяет задать обработчик события для определенного элемента веб-страницы.

Пример использования addEventListener:

js
const button = document.querySelector('button');
const handleClick = () => {
  console.log('clicked');
};
button.addEventListener('click', handleClick);

Данный код создает переменную button, которая ссылается на первую кнопку на странице, и задает функцию handleClick как обработчик клика на эту кнопку с помощью метода addEventListener. Когда пользователь кликает на кнопку, в консоль будет выведено сообщение "clicked".

Метод addEventListener имеет три параметра:

1. Тип события (например, 'click', 'mouseOver', 'scroll' и т. д.)

2. Функция-обработчик для выполнения при возникновении события

3. Необязательный параметр – объект, определяющий свойства события (содержит информацию о том, должно ли событие распространяться по дереву DOM, можно ли использовать событие только один раз и т. д.)

Например, следующий код прекращает распространение клика на всю страницу после клика на кнопку:

js
const button = document.querySelector('button');
const handleClick = (event) => {
  event.stopPropagation();
  console.log('clicked');
};
button.addEventListener('click', handleClick);

Метод addEventListener имеет ряд преимуществ по сравнению с другими методами, например, с помощью addEventListener можно навесить несколько обработчиков на одно и то же событие. Кроме того, addEventListener позволяет удалять обработчики событий с помощью метода removeEventListener.

js
const button = document.querySelector('button');
const handleClick1 = () => {
  console.log('clicked 1');
};
const handleClick2 = () => {
  console.log('clicked 2');
};
button.addEventListener('click', handleClick1);
button.addEventListener('click', handleClick2);
button.removeEventListener('click', handleClick1);

В этом коде происходит два клика на кнопку. При первом клике в консоль будет выведено сообщение "clicked 1" и "clicked 2", а при втором клике – только "clicked 2", т.к. обработчик handleClick1 был удален при помощи метода removeEventListener.