JAVASCRIPT Tutorial

The Event Object

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

  • عنصر الحدث: كائن في جافاسكربت يمثل حدثًا وقع على عنصر HTML.
  • الهدف: العنصر المستهدف الذي حدث فيه الحدث.
  • النوع: نوع الحدث الذي وقع، مثل "click" أو "keydown".
  • preventDefault: طريقة لمنع الحدث الافتراضي من الحدوث.
  • stopPropagation: طريقة لوقف انتشار الحدث إلى عناصر الوالد.
  • معلومات الحدث: بيانات إضافية حول الحدث، مثل إحداثيات الماوس أو قيمة المفتاح المضغوط.

الخطوات العملية:

  1. حدد عنصر HTML الذي تريد الاستماع إلى الأحداث فيه.
  2. أضف مستمع حدث إلى العنصر باستخدام طريقة "addEventListener".
  3. حدد دالة الرد التي سيتم استدعاؤها عند حدوث الحدث.
  4. في دالة الرد، يمكنك الوصول إلى عنصر "الحدث" الذي يحتوي على معلومات الحدث.
  5. استخدم طرق مثل "preventDefault" و "stopPropagation" لتعديل سلوك الحدث حسب الحاجة.

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

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log("حدث النقر:");
  console.log("الهدف:", event.target);
  console.log("النوع:", event.type);
  console.log("إحداثيات الماوس:", event.clientX, event.clientY);
});

ملاحظة للمتحدثين باللغة العربية:

هذا الدليل يهدف إلى تحسين إمكانية الوصول والاستخدام. يرجى عدم التردد في مشاركة اقتراحاتكم حول كيفية تحسين هذا الدليل بشكل أكبر لمتحدثي اللغة العربية.