Метод addEventListener в JavaScript

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

Синтаксис

элемент.addEventListener('тип события', функция)

Пример

Сделаем так, чтобы при клике на кнопку выводилось сообщение:

<input type="button" id="button" value="click me">
let button = document.querySelector('#button');
button.addEventListener('click', function() {
alert('message');
});

Пример

Сделаем так, чтобы при потери фокуса в инпуте выводилось сообщение, содержащее текст этого инпута:

<input id="input" value="text">
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
alert(this.value);
});