الأحداث

Events

مفهوم ~18 دقيقة

الأحداث — Events

في الواجهة، event handler يستقبل حدثاً. TypeScript يعرف النوع العام مثل Event, لكن event.target ليس دائماً العنصر الذي تتوقعه. لذلك في كثير من الحالات يكون currentTarget أو تمرير القيمة مباشرة أوضح.

إذا كنت تستخدم إطاراً مثل React، ستكون أنواع الأحداث مختلفة قليلاً، لكن الفكرة واحدة: لا تفترض شكل target بدون تحقق. اكتب handler صغيراً يحول الحدث إلى قيمة typed، ثم مررها إلى منطق منفصل.

أحداث DOM الحقيقية — Real DOM Events

في المتصفح، تستخدم addEventListener مع أنواع واضحة. TypeScript يعرف نوع الحدث حسب اسمه:

index.ts

// مثال توضيحي — لا يعمل في Node.js
// هذا النمط يعمل في الصفحة مع lib: DOM في tsconfig

function handleValueChange(value: string): string {
  return value.trim().toUpperCase();
}

// في المتصفح:
// const button = document.querySelector<HTMLButtonElement>("#go");
// if (!button) throw new Error("button not found");
// button.addEventListener("click", (e: MouseEvent) => {
//   e.preventDefault();
//   console.log("clicked");
// });

// const input = document.querySelector<HTMLInputElement>("#name");
// input?.addEventListener("input", (e: Event) => {
//   const target = e.currentTarget as HTMLInputElement;
//   console.log(handleValueChange(target.value));
// });

const result = handleValueChange(" azlearn ");
console.log(result);

Output:

الاستخدام الصحيح لـ querySelector<T> يُضيّق النوع مباشرة. إذا كان العنصر غير موجود، أوقف التنفيذ بخطأ واضح بدل تجاهل null.

للـ currentTarget: cast آمن هنا لأن الـ listener مربوط مباشرة بالعنصر المعروف.

فصل UI عن المنطق

الحدث يجمع قيمة من الواجهة، والمنطق يعالج القيمة. لا تخلطهما إذا كانت المعالجة مهمة.

تحدي — Challenge

function normalize(value: string): string {
  /* TODO */ return "";
}

console.log(normalize(" azlearn "));