الدرس السابع عشر: التعامل مع الأحداث المتقدمة في JavaScript (Event Object & Delegation)

 في هذا الدرس سنتعرف على مستويين متقدمين من التعامل مع الأحداث:

1. كائن الحدث Event Object
2. تفويض الحدث Event Delegation

---

1. كائن الحدث (Event Object)

عند التعامل مع الأحداث، يمكننا الحصول على كائن يحتوي على معلومات عن الحدث الذي وقع.

مثال:

<button id="btn">اضغطني</button>

let btn = document.getElementById("btn");

btn.addEventListener("click", function(event) {
  console.log(event);              // كل معلومات الحدث
  console.log(event.type);         // نوع الحدث (click)
  console.log(event.target);       // العنصر الذي وقع عليه الحدث
});

---

أمثلة مهمة من خصائص كائن الحدث:

الخاصية	الوظيفة
type	نوع الحدث مثل "click" أو "keydown"
target	العنصر الذي وقع عليه الحدث
preventDefault()	منع السلوك الافتراضي للعنصر (مثل إرسال النموذج)

---

2. تفويض الحدث (Event Delegation)

هو أسلوب لتوفير الأداء عند التعامل مع عناصر متعددة. بدلاً من ربط حدث بكل عنصر، نربط الحدث بأب واحد ونتعرف على العنصر الذي نُقر عليه باستخدام event.target.

مثال:

<ul id="myList">
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ul>

let list = document.getElementById("myList");

list.addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    alert("تم النقر على: " + e.target.textContent);
  }
});

لماذا نستخدم التفويض؟

• الأداء: بدل أن نضيف حدثًا لكل <li>، نضيفه للأب <ul> فقط.
• مفيد للعناصر التي تُضاف ديناميكيًا.

---

✅ ملخص الدرس:

• event هو كائن يحمل معلومات عن الحدث.
• يمكنك استخدام event.target لتحديد العنصر الذي حصل عليه الحدث.
• تفويض الأحداث يوفر أداء أفضل ويُستخدم عند التعامل مع عدد كبير من العناصر.