أنواع الأحداث والأحداث المخصصة؛ تضييق أنواع HTMLElement الفرعية

مقدمة

مستمعات مكتوبة الأنواع

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

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

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

تضييق النوع الفرعي

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

التحقق من التضييق

مراجعة