Объект события: target, type, currentTarget

Браузер вызывает обработчик с одним аргументом — объектом события. Назвать его можно как угодно: event, e, ev. Это обычный параметр функции, имя ни на что не влияет, важен только порядок — он там всегда первый и всегда единственный.

Внутри — свойства, описывающие произошедшее, и все они только для чтения. У клика это ещё и координаты с номером кнопки мыши, у клавиатуры — код клавиши. Но четыре поля есть у любого события, от click до самодельного: type, target, currentTarget, timeStamp.

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

go.addEventListener("click", (event) => {
  console.log(typeof event);
  console.log(event.type);
  console.log(event.target === go);
});

go.click();

Последняя строка — не украшение. Мы не ждём, пока кто-то ткнёт в кнопку: go.click() порождает событие программно, и обработчик отрабатывает тут же, синхронно. Дальше все примеры устроены так же.

target — самый глубокий элемент, на котором событие возникло. currentTarget — элемент, на котором висит обработчик, выполняющийся прямо сейчас. Событие всплывает от target вверх по предкам, и на каждом слушателе currentTarget свой, а target всю дорогу один и тот же. Сам маршрут — погружение, цель, всплытие — разбирает статья «Всплытие и погружение»; здесь важно только, что слушателей по дороге бывает несколько.

Формула короткая: target — «где щёлкнули», currentTarget — «кто слушает». В обработчике-function тот же элемент лежит ещё и в this, но у стрелочной функции своего this нет, поэтому привыкайте писать event.currentTarget — это работает в обоих случаях.

const card = document.getElementById("card");
const label = document.getElementById("label");

card.addEventListener("click", (event) => {
  console.log(event.target.id);
  console.log(event.currentTarget.id);
  console.log(event.target === label);
});

label.click();

const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const seen = [];

const handler = (event) => {
  seen.push(event.currentTarget.id + ":" + event.target.id);
};

outer.addEventListener("click", handler);
inner.addEventListener("click", handler);

inner.click();
console.log(seen);

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

save.addEventListener("click", (event) => {
  const el = event.currentTarget;
  console.log(el.id);

  setTimeout(() => {
    console.log(event.target.id);
    console.log(event.currentTarget);
    console.log(el.id);
  }, 0);
});

save.click();

type — строка с именем события: click, input, keydown. Она нужна, когда одна и та же функция подписана на несколько типов сразу: разобрать поведение по event.type проще, чем держать три почти одинаковых обработчика.

const search = document.getElementById("search");
const log = [];

const onAny = (event) => {
  log.push(event.type);
};

search.addEventListener("input", onAny);
search.addEventListener("change", onAny);

search.value = "кофе"; // присвоение value само событий не рождает
search.dispatchEvent(new Event("input"));
search.dispatchEvent(new Event("change"));

console.log(log);

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

const tick = document.getElementById("tick");
const marks = [];

tick.addEventListener("click", (event) => {
  marks.push(event.timeStamp);
});

tick.click();
tick.click();

console.log(marks.length);
console.log(typeof marks[0]);
console.log(marks[1] >= marks[0]);

Список из двадцати пунктов, и на каждый нужен клик. Можно навесить двадцать обработчиков, а можно один — на общего родителя — и внутри посмотреть на target. Это делегирование, и держится оно ровно на разнице между target и currentTarget: слушаем родителя, а работаем с тем, куда попали. Здесь приём показан ради этой разницы; как на нём держатся панели, списки и формы — в статье «Делегирование событий».

const menu = document.getElementById("menu");

menu.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item) return;
  console.log(event.currentTarget.id, item.dataset.id);
});

menu.children[1].click();
menu.click();

Ловушка здесь одна, зато встречается у всех: target — самый глубокий узел, а не тот элемент, который вы держали в голове. Появилась внутри пункта иконка или span — и проверка event.target.tagName === "LI" перестаёт срабатывать. Поэтому от target всегда поднимаются вверх через closest().

const tags = document.getElementById("tags");

tags.addEventListener("click", (event) => {
  console.log(event.target.tagName);
  console.log(event.target.dataset.tag);
  console.log(event.target.closest("li").dataset.tag);
});

tags.querySelectorAll("span")[1].click();

Делегирование бессильно с событиями, которые не всплывают: focus, blur, load. У первых двух есть всплывающие двойники focusin и focusout, а в общем случае помогает третий аргумент addEventListener со стадией перехвата: { capture: true }.

Кроме четвёрки основных полей в объекте события есть несколько служебных. Знать их наизусть не нужно, но узнавать в чужом коде полезно.

Настоящие пользовательские события всплывают и обычно отменяемы, а вот у самодельного new Event("input") оба флага по умолчанию выключены. Из-за этого делегирование «не видит» рукотворные события, пока не передашь вторым аргументом { bubbles: true }. Кстати, у события из element.click() поле isTrusted равно false — браузер честно помечает всё, что пришло не от человека.

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

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

field.dispatchEvent(new Event("input"));
field.dispatchEvent(new Event("input", { bubbles: true }));