JS addEventListener - простой и эффективный способ обработки событий

JavaScript метод addEventListener используется для добавления событий к элементам HTML DOM. Он позволяет прикрепить функции-обработчики к элементу, чтобы реагировать на определенные события, такие как щелчок мыши, нажатие клавиши или загрузка веб-страницы.

При использовании addEventListener, два параметра передаются в качестве аргументов: тип события и функцию-обработчик. На примере щелчка по кнопке:

const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
  console.log("Кнопка нажата.");
});

В этом примере мы выбираем кнопку с ID "myButton" и добавляем обработчик, который будет вызван, когда произойдет щелчок на кнопке. Функция-обработчик в данном случае выводит сообщение в консоль, когда кнопка нажата.

Также addEventListener позволяет добавлять несколько функций-обработчиков для одного события. Например:

button.addEventListener("click", function() {
  console.log("Первый обработчик");
});
button.addEventListener("click", function() {
  console.log("Второй обработчик");
});

Здесь мы добавляем два обработчика для события click на кнопке. При щелчке по кнопке, оба обработчика будут вызваны, выводя сообщения в консоль.

Обработчики можно также написать как отдельные функции и использовать их вместо анонимных функций в addEventListener. Например:

function firstHandler() {
  console.log("Первый обработчик");
}
function secondHandler() {
  console.log("Второй обработчик");
}
button.addEventListener("click", firstHandler);
button.addEventListener("click", secondHandler);

Здесь мы создаем две отдельные функции-обработчики и добавляем их к кнопке при помощи addEventListener.

В заключении, addEventListener предоставляет простой и гибкий способ добавления обработчиков событий к элементам HTML DOM. Он позволяет использовать функции-обработчики как встроенные анонимные функции, так и отдельные функции, и поддерживает добавление нескольких обработчиков для одного события. Это один из основных инструментов, используемых в web-разработке с использованием JavaScript.