addEventListener: руководство по применению

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

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

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

javascript
// получаем ссылку на элемент кнопки
const button = document.querySelector('#myButton');
// назначаем обработчик события "click" на кнопке
button.addEventListener('click', function(event) {
  // обрабатываем клик по кнопке
  alert('Кнопка нажата!');
});

В этом примере мы получаем ссылку на элемент кнопки с помощью метода querySelector () и назначаем обработчик события click на эту кнопку с помощью метода addEventListener (). Когда пользователь кликает на кнопку, функция обратного вызова внутри addEventListener () вызывается, и появляется сообщение с текстом "Кнопка нажата!" в виде диалогового окна.

Другой пример использования метода addEventListener () для назначения обработчика события изменения значения текстового поля:

javascript
// получаем ссылку на текстовое поле
const input = document.querySelector('#myInput');
// назначаем обработчик события "input" на текстовом поле
input.addEventListener('input', function(event) {
  // обрабатываем изменение значения текстового поля
  console.log('Текстовое поле изменено');
});

В этом примере мы получаем ссылку на текстовое поле с помощью метода querySelector () и назначаем обработчик события input, который вызывается каждый раз, когда пользователь вводит или изменяет текст в текстовом поле. Когда пользователь изменяет значение текстового поля, функция обратного вызова внутри addEventListener () вызывается, и появляется сообщение в консоли с текстом "Текстовое поле изменено".