0Pricing
TypeScript Academy · Урок

Типы событий, пользовательские события; сужение подтипов HTMLElement

Обрабатывайте события DOM с корректными типами, создавайте полезные данные CustomEvent и безопасно сужайте подтипы HTMLElement.

«Типы событий, пользовательские события; сужение подтипов HTMLElement» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.

Введение

Цель: добавлять типизированные обработчики событий, безопасно уточнять типы элементов и отправлять CustomEvent с данными.

  • Типы событий (MouseEvent, KeyboardEvent, InputEvent)
  • Уточнение target/currentTarget с помощью instanceof
  • Данные detail в CustomEvent

Типизированные обработчики

Сигнатуры обработчиков типизируются по имени события: click → MouseEvent, keydown → KeyboardEvent. Для ясности добавляйте явные аннотации.

const btn = document.querySelector("#btn");
if (btn) {
  btn.addEventListener("click", (ev: MouseEvent) => {
    console.log("x=", ev.clientX, "y=", ev.clientY);
  });
}

window.addEventListener("keydown", (ev: KeyboardEvent) => {
  console.log("key=", ev.key);
});

target и currentTarget

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

document.addEventListener("input", (ev: InputEvent) => {
  const t = ev.target;
  const c = ev.currentTarget; // here: Document
  if (t instanceof HTMLInputElement) {
    console.log("value=", t.value);
  }
});

Данные CustomEvent

CustomEvent<T> содержит типизированные данные detail. Отправляйте и обрабатывайте событие с одинаковым параметром обобщённого типа.

type CounterDetail = { delta: number };

const inc = new CustomEvent<CounterDetail>("counter:change", {
  detail: { delta: 1 }
});

document.dispatchEvent(inc);

document.addEventListener("counter:change", (ev: CustomEvent<CounterDetail>) => {
  console.log("delta=", ev.detail.delta);
});

Уточнение подтипа

Используйте instanceof, чтобы уточнить тип до конкретных классов HTML-элементов (например, HTMLButtonElement, HTMLAnchorElement).

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target;
  if (el instanceof HTMLButtonElement) {
    el.disabled = true; // safe: HTMLButtonElement API
  } else if (el instanceof HTMLAnchorElement) {
    console.log("href=", el.href);
  }
});

Делегирование и защитная проверка

Делегирование: слушайте события на высоком уровне (document), затем найдите подходящий элемент и уточните его тип перед обращением к API.

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target as Element | null;
  if (!el) return;
  const btn = el.closest("button.btn-primary");
  if (btn instanceof HTMLButtonElement) {
    console.log("delegated click on:", btn.textContent);
  }
});

Проверка уточнения типа

Быстрая проверка: как безопаснее всего обращаться к API, специфичным для элемента, в обработчике события?

Итоги

Итоги: имена событий подразумевают типы событий. Используйте instanceof, чтобы уточнять типы target/currentTarget, и передавайте данные в свойстве detail объекта CustomEvent<T>.

Часто задаваемые вопросы

Урок «Типы событий, пользовательские события; сужение подтипов HTMLElement» бесплатный?

Да — полный текст урока «Типы событий, пользовательские события; сужение подтипов HTMLElement» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Типы событий, пользовательские события; сужение подтипов HTMLElement»?

Обрабатывайте события DOM с корректными типами, создавайте полезные данные CustomEvent и безопасно сужайте подтипы HTMLElement. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Типы событий, пользовательские события; сужение подтипов HTMLElement»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типы lib DOM и querySelector (строгая проверка на null)
  2. Типы событий, пользовательские события; сужение подтипов HTMLElement
  3. Работа с FormData, URL и URLSearchParams
← Назад к TypeScript Academy