JavaScript • المستوى الثالث • الدرس 3

الاستجابة لأحداث المستخدم (Event Listeners)

أهداف الدرس العلمية

فهم مفهوم الأحداث (Events) وكيف يستجيب الموقع لتفاعلات المستخدم.
استخدام الميثود addEventListener() لربط الأحداث بالدوال البرمجية.
التعرف على أحداث الماوس ولوحة المفاتيح مثل click و input.
إلغاء السلوك الافتراضي للنماذج باستخدام event.preventDefault().

1. ربط الأحداث بـ addEventListener

الأحداث هي الإشارات التي ترسلها الصفحة عند حدوث تفاعل من الزائر (مثل النقر على زر، الكتابة في حقل مدخلات، أو تحريك الماوس). تُعتبر دالة addEventListener الطريقة الاحترافية للانتظار والاستجابة لتلك الأحداث:

javascript

/* element.addEventListener("اسم_الحدث", الدالة_المنفذة); */

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

button.addEventListener("click", () => {
  console.log("تمت النقر على الزر!");
});

2. أهم الأحداث الشائعة في الويب

تتعدد الأحداث المتاحة بحسب نوع التفاعل المراد التقاطه:

javascript

"click"

يعمل عند النقر بالفأرة أو الضغط على العنصر.

javascript

"input"

يعمل فورياً وفي نفس لحظة كتابة أي حرف داخل حقل الإدخال <input>.

javascript

"submit"

يُطلق عند إرسال النموذج <form>.

التطبيق العملي المباشر

تحدي الدرس الثالث: إضافة حدث النقر على الزر

قم بكتابة كود JavaScript داخل وسم <script> لتنفيذ الخطوات التالية:

تحديد الزر بـ الـ ID المسمى myBtn وخزنه في متغير.
إضافة مستمع حدث click للزر باستخدام addEventListener.
عند النقر، اجعل الفقرة #message تعرض النص: "مرحباً بك! تم التفاعل بنجاح".

محرر الأكواد — HTML

14px

جارٍ تهيئة البيئة...

المخرجات — المخرجات

الكونسول (Console)

13px

nahda@runner — html

0 lines

(لا يوجد إخراج)

HTMLLn 24, Col 1UTF-8Spaces: 2

515 chars

الدرس السابق الانتقال للدرس الرابع