Метод addEventListener

Метод 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);
});

Смотрите также

метод removeEventListener,
который отвязывает событие от элемента