События JavaScript: addEventListener

Основная идея

AddEventListener связывает событие с функцией-обработчиком. Например, click у кнопки может обновить текст результата. Передайте саму функцию, а не результат её немедленного вызова.

Объект события содержит сведения о действии. Target указывает исходную цель, currentTarget — элемент, на котором выполняется текущий обработчик. При делегировании эти значения особенно важно различать.

Пример JavaScript

const button = document.querySelector("[data-save]");
button?.addEventListener("click", () => {
  const output = document.querySelector("[data-status]");
  if (output) output.textContent = "Учебное действие выполнено";
});

Это пример изменения интерфейса, а не сохранения на сервере. В документе нужны кнопка data-save и элемент data-status.

Частая ошибка

Самостоятельная проверка

Вызовите кнопку мышью и клавиатурой. Для настоящего действия используйте button, чтобы не писать поддержку клавиатуры заново.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: DOM, запросы.