addeventlistener js что это

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

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

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

function handleClick() {
  alert('Нажали кнопку');
}

button.addEventListener('click', handleClick);

В этом примере мы используем addEventListener для прослушивания события click на кнопке с id="myButton". Когда пользователь кликает на эту кнопку, будет вызвана функция handleClick, которая отображает всплывающее окно с сообщением.

Метод addEventListener позволяет назначить на элемент обработчики событий. С его помощью, можно указать, например, что делать при клике по кнопке или что делать при наборе текста в текстовом поле. В первом параметре указываем тип передаваемого события, во втором - функцию, которая будет срабатывать после события, указанного в первом параметре. В третьем необязательном параметре передаем характеристики объекта (once, capture, passive) или параметр useCapture.

Синтаксис

элемент.addEventListener('тип события', функция, [характеристики объекта]);

или

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

Пример

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

<input type="button" id="button" value="click me">
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

Результат: