0Pricing
TypeScript Academy · Lekcja

Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement

Obsługa zdarzeń DOM z właściwymi typami, tworzenie danych CustomEvent oraz bezpieczne zawężanie podtypów HTMLElement

Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Wprowadzenie

Cel: Dodawać typowane nasłuchiwanie zdarzeń, bezpiecznie zawężać typy elementów i emitować CustomEvent z ładunkami.

  • Typy zdarzeń (MouseEvent, KeyboardEvent, InputEvent)
  • Zawężanie target/currentTarget za pomocą instanceof
  • Ładunki detail zdarzeń CustomEvent

Typowane nasłuchiwacze

Sygnatury nasłuchiwaczy są określane przez nazwę zdarzenia: click → MouseEvent, keydown → KeyboardEvent. Dla jasności należy dodawać jawne adnotacje.

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 a currentTarget

target to pierwotne źródło zdarzenia i może mieć wiele typów; currentTarget to odbiorca nasłuchiwacza. Zawężaj typ za pomocą instanceof, zanim użyjesz API elementu.

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

Ładunek CustomEvent

CustomEvent<T> przenosi typowany ładunek detail. Wysyłaj zdarzenie i obsługuj je z użyciem zgodnego parametru generycznego.

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);
});

Zawężanie do podtypu

Użyj instanceof, aby zawęzić typ do konkretnych klas elementów HTML (np. 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);
  }
});

Delegowanie + strażnik

Delegowanie: Nasłuchuj wysoko w hierarchii (na obiekcie document), a następnie znajdź pasujący element i zawęź jego typ przed uzyskaniem dostępu do 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);
  }
});

Sprawdzenie zawężania typu

Szybkie sprawdzenie: Jaki jest najbezpieczniejszy sposób uzyskania dostępu do API właściwych dla elementu w obsłudze zdarzenia?

Podsumowanie

Podsumowanie: Nazwy zdarzeń wskazują ich typy. Używaj instanceof, aby zawężać target/currentTarget, a dane przenoś w polu detail obiektu CustomEvent<T>.

Często zadawane pytania

Czy lekcja „Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement” jest bezpłatna?

Tak — pełny tekst „Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement”?

Obsługa zdarzeń DOM z właściwymi typami, tworzenie danych CustomEvent oraz bezpieczne zawężanie podtypów HTMLElement Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Typy lib DOM i querySelector (ścisłe sprawdzanie null)
  2. Typy zdarzeń, zdarzenia niestandardowe; zawężanie podtypów HTMLElement
  3. Praca z FormData, URL i URLSearchParams
← Powrót do TypeScript Academy