معالجة الأحداث

المفاهيم الأساسية:

• مستمع الأحداث: دالة تُستدعى عندما يحدث حدث معين.
• addEventListener: دالة تسجل مستمع حدث مع عنصر HTML.
• removeEventListener: دالة تلغي تسجيل مستمع حدث من عنصر HTML.
• كائن الحدث: كائن يمثل الحدث الذي حدث.
• الهدف: عنصر HTML الذي حدث فيه الحدث.
• النوع: نوع الحدث الذي حدث (مثل "انقر" أو "تغيير").
• منع الحدث الافتراضي: دالة تمنع الحدث الافتراضي من الحدوث.
• إيقاف انتشار الحدث: دالة تمنع الحدث من الانتشار إلى عناصر HTML الأخرى.

خطوات عملية:

1. حدد العنصر HTML الذي تريد الاستماع للأحداث فيه.
2. حدد نوع الحدث الذي تريد الاستماع إليه.
3. قم بتعريف دالة مستمع الحدث.
4. استخدم دالة addEventListener لتسجيل مستمع الحدث مع العنصر.
5. (اختياري) استخدم دالة removeEventListener لإلغاء تسجيل مستمع الحدث إذا لم تعد بحاجته.

مثال جافا سكريبت:

// حدد الزر الذي نريد الاستماع لحدث النقر عليه
const button = document.getElementById("my-button");

// عَرّف دالة مستمع الحدث
function handleClick(event) {
  // احصل على كائن الحدث
  const event = event;

  // احصل على عنصر الهدف الذي حدث فيه الحدث
  const target = event.target;

  // احصل على نوع الحدث
  const type = event.type;

  // قم بشيء ما عند حدوث الحدث (في هذه الحالة، قم بتسجيل الحدث في وحدة التحكم)
  console.log(`حدث نوع ${type} على الهدف ${target.id}`);
}

// أضف مستمع الحدث إلى الزر
button.addEventListener("click", handleClick);

هذا المثال سيُسجل مستمع حدث للنقر على الزر "my-button". عندما ينقر المستخدم على الزر، ستُستدعى الدالة handleClick وسيُسجل الحدث في وحدة التحكم.