Что такое событие и как на него подписаться

Пока страница открыта, браузер вслух комментирует происходящее: кнопку нажали, в поле ввели символ, окно изменило размер, картинки догрузились. Каждое такое сообщение — событие. Оно рассказывает о том, что уже случилось: помешать ему нельзя, можно только заранее договориться, кого позвать.

Функция, которую позовут, называется обработчиком. Подписка читается как обещание: «если на этом элементе случится click — вызови вот эту функцию». Дальше браузер сам следит за элементом, а мы возвращаемся к другим делам.

const button = document.getElementById("ok");

button.addEventListener("click", function () {
  console.log("кнопку нажали");
});

button.click();

В примерах учебника некому щёлкать мышью, поэтому мы нажимаем кнопку из кода: button.click() порождает событие click, и обработчики срабатывают как обычно. Но это не то же самое, что нажатие человеком: у такого события isTrusted === false, ему не предшествуют pointerdown и mousedown, и действия, которые браузер разрешает только по настоящему жесту, по нему не выполнятся.

Вся подписка — это один метод: элемент.addEventListener(тип, обработчик, опции). Тип пишется строкой и без приставки on: "click", "input", "submit", "keydown". Обработчик получает единственный аргумент — объект события, куда браузер сложил подробности случившегося.

const input = document.getElementById("field");

input.addEventListener("input", (event) => {
  console.log(event.type);
  console.log(event.target.value);
});

input.value = "Аня";
input.dispatchEvent(new Event("input"));

Два свойства объекта события пригодятся сразу: type — что случилось, target — на каком элементе. А ещё у части событий есть поведение по умолчанию (форма отправляется, ссылка уводит на адрес), и отменяет его вызов event.preventDefault(). Когда отмена уместна, а когда ломает привычки пользователя, разбирает статья «preventDefault: отмена действия по умолчанию».

const form = document.getElementById("login");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // без этой строки страница перезагрузится
  console.log(event.type);
  console.log(form.elements.user.value);
});

form.requestSubmit();

Главная практическая ценность addEventListener: подписок на один элемент может быть сколько угодно, и они не знают друг о друге. Браузер хранит их списком и вызывает по очереди — в порядке добавления. Валидация формы, аналитика и подсветка кнопки живут в трёх независимых функциях, а не в одной перегруженной.

const button = document.getElementById("save");

button.addEventListener("click", () => {
  console.log("проверяем форму");
});

button.addEventListener("click", () => {
  console.log("пишем в аналитику");
});

button.click();

Есть тонкость: одинаковая пара «тот же тип + та же самая функция» добавляется только один раз. Повторный вызов с той же ссылкой ничего не меняет и ошибки не вызывает.

const button = document.getElementById("tick");

function log() {
  console.log("тик");
}

button.addEventListener("click", log);
button.addEventListener("click", log);

button.click();

Дубликат ищется по ссылке на функцию, а не по её тексту. Две одинаковые с виду стрелочные функции — это две разные функции, и подпишутся обе.

До addEventListener обработчик клали в свойство: button.onclick = функция. Существует и совсем древний вариант — атрибут onclick прямо в разметке, но он перемешивает вёрстку с логикой, и его давно не пишут. Способ со свойством рабочий и короткий, только у него есть потолок: свойство одно.

const button = document.getElementById("go");

button.onclick = () => {
  console.log("первый");
};

button.onclick = () => {
  console.log("второй");
};

button.click();

Отсюда правило: чужая библиотека или ваш же модуль, написанный месяц назад, могут молча стереть обработчик — и наоборот. По умолчанию берите addEventListener, а onclick оставьте для быстрых проб в консоли.

const button = document.getElementById("mix");

button.onclick = () => {
  console.log("из свойства");
};

button.addEventListener("click", () => {
  console.log("из подписки");
});

button.click();

Подписка живёт, пока жив элемент, — или пока её не снимут. Снимает removeEventListener, и ему нужны тот же тип и та же ссылка на функцию. Анонимную стрелку, написанную прямо в вызове, снять нечем: второй такой же на вид литерал — уже другая функция. Значит, обработчик придётся назвать. Дальше этого правила у отписки своя глубина — фазы, утечки, снятие пачкой; ей отведена статья «Отписка и однократные обработчики», а здесь хватит самого правила.

const button = document.getElementById("reveal");

function show() {
  console.log("сработал");
  button.removeEventListener("click", show);
}

button.addEventListener("click", show);

button.click();
button.click();

Если обработчик и задумывался одноразовым, хранить ссылку не нужно — есть опция { once: true }. Браузер снимет подписку сам сразу после первого вызова.

const button = document.getElementById("hello");
let calls = 0;

button.addEventListener("click", () => {
  calls += 1;
}, { once: true });

button.click();
button.click();

console.log(calls);

const button = document.getElementById("ping");
const controller = new AbortController();
let calls = 0;

button.addEventListener("click", () => {
  calls += 1;
}, { signal: controller.signal });

button.click();
controller.abort();
button.click();

console.log(calls);