JS addEventListener: работа с событиями в JavaScript

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

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

Синтаксис метода AddEventListener выглядит следующим образом:

element.addEventListener(event, function, useCapture);

• element - это DOM-элемент, к которому нужно добавить обработчик события.
• event - это строка, указывающая тип события. Например, "click" для события клика, "change" для события изменения значения формы и т.д.
• function - это функция, которая будет выполнена при возникновении события.
• useCapture - это необязательный булевский аргумент, определяющий, должен ли обработчик события использовать всплытие (false) или погружение (true).

Ниже приведены несколько примеров кода, демонстрирующих применение метода AddEventListener.

Пример 1: Обработка события клика

const button = document.querySelector('.button');

function handleClick() {
  console.log('Кликнули на кнопку!');
}

button.addEventListener('click', handleClick);

В этом примере при клике на кнопку с классом "button" в консоли будет выведено сообщение "Кликнули на кнопку!".

Пример 2: Обработка события наведения мыши

const image = document.querySelector('.image');

function handleMouseOver() {
  console.log('Навели указатель мыши на изображение!');
}

image.addEventListener('mouseover', handleMouseOver);

В этом примере при наведении указателя мыши на изображение с классом "image" в консоли будет выведено сообщение "Навели указатель мыши на изображение!".

Пример 3: Обработка события изменения значения формы

const input = document.querySelector('.input');

function handleChange() {
  console.log('Значение формы было изменено: ' + input.value);
}

input.addEventListener('change', handleChange);

В этом примере при изменении значения элемента ввода с классом "input" в консоли будет выведено сообщение "Значение формы было изменено: [новое значение]".

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

Он является одним из основных инструментов для работы с событиями в JavaScript и широко используется во многих веб-приложениях.