0Pricing
TypeScript Academy · Ders

Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma

DOM olaylarını doğru türlerle işleyin, CustomEvent yükleri oluşturun ve HTMLElement alt türlerini güvenle daraltın.

Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.

Giriş

Amaç: Türleri belirtilmiş olay dinleyicileri eklemek, öğeleri güvenli biçimde daraltmak ve yüklerle CustomEvent göndermek.

  • Olay türleri (MouseEvent, KeyboardEvent, InputEvent)
  • target/currentTarget değerlerini instanceof ile daraltma
  • CustomEvent detail yükleri

Türleri belirtilmiş dinleyiciler

Dinleyici imzaları olay adına göre türlendirilir: click → MouseEvent, keydown → KeyboardEvent. Açıklık için açık tür açıklamaları ekleyin.

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 ve currentTarget karşılaştırması

target özgün kaynaktır ve birçok türde olabilir; currentTarget ise dinleyicinin alıcısıdır. Öğe API'lerini kullanmadan önce instanceof ile türü daraltın.

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 yükü

CustomEvent<T>, türü belirtilmiş bir detail yükü taşır. Uyumlu genel tür parametresiyle gönderip işleyin.

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

Alt türü daraltma

Belirli HTML öğesi sınıflarına (ör. HTMLButtonElement, HTMLAnchorElement) daraltmak için instanceof kullanın.

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

Olay devri + koruma

Olay devri: Yukarıdaki bir öğeyi (document) dinleyin, ardından eşleşen öğeyi bulun ve API'lerine erişmeden önce türünü daraltın.

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

Daraltma denetimi

Hızlı denetim: Bir olay işleyicisinde öğe türüne özgü API'lere erişmenin en güvenli yolu nedir?

Özet

Özet: Olay adları olay türlerini belirtir. target/currentTarget değerlerini daraltmak için instanceof kullanın ve verileri CustomEvent<T> detail içinde taşıyın.

Sıkça Sorulan Sorular

“Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma” dersi ücretsiz mi?

Evet — “Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.

“Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma” dersinde ne öğreneceğim?

DOM olaylarını doğru türlerle işleyin, CustomEvent yükleri oluşturun ve HTMLElement alt türlerini güvenle daraltın. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. lib DOM türleri ve querySelector (katı null denetimleri)
  2. Olay türleri, özel olaylar; HTMLElement alt türlerini daraltma
  3. FormData, URL ve URLSearchParams ile çalışma
← TypeScript Academy Sayfasına Dön