Добавление обработчиков событий на сайт при помощи addEventListener в JavaScript

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

Синтаксис:

javascript
element.addEventListener(event, function, useCapture);

• event - название события, которое мы хотим прослушивать (например, "click", "keydown", "mouseenter" и т.д.).
• function - функция-обработчик, которая будет вызываться при возникновении события.
• useCapture - опциональный булевый параметр, который указывает, в каком порядке события будут обрабатываться на элементе (true - сначала перехватываются события на родительском элементе, false - на элементе, на котором произошло событие).

Например, назначим обработчик события "click" на кнопке:

html
Click me!

javascript
let btn = document.querySelector("#myButton");
btn.addEventListener("click", function() {
  console.log("Button clicked!");
});

Когда мы кликнем на кнопку, в консоли будет выведено сообщение "Button clicked!".

Можно также создать отдельную функцию и передать ее в качестве обработчика:

javascript
function handleClick() {
  console.log("Button clicked!");
}
btn.addEventListener("click", handleClick);

Это позволит повторно использовать функцию-обработчик в других местах.

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

javascript
let link = document.querySelector("#myLink");
link.addEventListener("click", function(event) {
  console.log("Link clicked!");
  event.preventDefault(); // отменяем переход по ссылке
  return false; // прекращаем дальнейшую обработку события
});

Также можно передать дополнительные аргументы в функцию-обработчик:

javascript
let input = document.querySelector("#myInput");
input.addEventListener("keydown", function(event) {
  console.log("Key pressed: " + event.key);
});

Здесь мы передаем объект события в функцию-обработчик, который содержит много информации о событии. Например, свойство "key" содержит символ, который был нажат на клавиатуре.

В целом, addEventListener является очень удобным методом для работы с событиями в JavaScript, и позволяет писать более чистый и понятный код.