مقدمة
في الدرس السابق تعرفنا على DOM، وعرفنا كيف يمكن لـ JavaScript الوصول إلى عناصر صفحة الويب وتعديلها.
لكن الصفحة التفاعلية تحتاج إلى الاستجابة لتصرفات المستخدم، مثل الضغط على زر أو الكتابة داخل حقل.
وهنا يأتي دور الأحداث (Events).
ما هو الحدث (Event)؟
الحدث هو شيء يحدث داخل صفحة الويب ويمكن لـ JavaScript اكتشافه والاستجابة له.
ومن أمثلة الأحداث:
الضغط على زر
الكتابة في حقل
تحريك مؤشر الفأرة
إرسال نموذج
تحميل الصفحة
مستمع الأحداث (Event Listener)
يمكن لـ JavaScript الاستماع إلى حدث معين باستخدام Event Listener.
وعند حدوث الحدث، يتم تنفيذ وظيفة محددة.
وهذا يسمح بإنشاء صفحات تستجيب لتفاعل المستخدم.
حدث النقر (click)
يعد click من أشهر الأحداث.
يحدث عندما ينقر المستخدم على عنصر معين، مثل زر.
ويمكن استخدامه لتنفيذ إجراء بعد الضغط على الزر.
أحداث لوحة المفاتيح
يمكن أيضًا التعامل مع أحداث لوحة المفاتيح، مثل:
الضغط على مفتاح
رفع الإصبع عن المفتاح
وهذا مفيد في التطبيقات التي تحتاج إلى الاستجابة لما يكتبه المستخدم.
أحداث النماذج (Forms)
يمكن الاستماع إلى الأحداث المتعلقة بالنماذج، مثل إرسال النموذج.
وهذا يسمح بفحص البيانات التي أدخلها المستخدم أو تنفيذ عملية معينة قبل إرسالها.
دوال معالجة الأحداث
عند وقوع حدث، تحتاج JavaScript إلى معرفة الكود الذي يجب تنفيذه.
ويتم ذلك باستخدام دالة معالجة الحدث (Event Handler).
يمكن أن تكون هذه الدالة مسؤولة عن تغيير محتوى الصفحة أو تنفيذ عملية أخرى.
كائن الحدث (Event Object)
عند وقوع الحدث، توفر JavaScript معلومات عنه من خلال Event Object.
يمكن استخدام هذه المعلومات لمعرفة تفاصيل الحدث والعنصر الذي حدث عليه.
إيقاف السلوك الافتراضي
بعض العناصر لديها سلوك افتراضي عند حدوث أحداث معينة.
يمكن لـ JavaScript منع هذا السلوك عندما يكون ذلك مطلوبًا، وهذا مفيد خصوصًا عند التعامل مع النماذج والروابط.
الأحداث وDOM
يعمل DOM والأحداث معًا بشكل كبير.
فيمكن الوصول إلى عنصر باستخدام DOM، ثم إضافة مستمع حدث إليه، وبعد تفاعل المستخدم يتم تعديل الصفحة.
وهذه الفكرة هي أساس الكثير من الواجهات التفاعلية في JavaScript.
استخدام Events في المشاريع
تستخدم الأحداث في العديد من التطبيقات، مثل:
الأزرار التفاعلية
النماذج
الألعاب
القوائم
الآلات الحاسبة
تطبيقات الويب
فوائد الأحداث
من أهم فوائدها:
جعل صفحات الويب تفاعلية
الاستجابة لتصرفات المستخدم
إنشاء واجهات ديناميكية
تحسين تجربة المستخدم
ربط تفاعل المستخدم بمنطق البرنامج
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
اختيار اسم حدث غير صحيح
إضافة مستمع الحدث إلى عنصر غير موجود
تنفيذ الكود في الوقت الخطأ
الخلط بين الحدث ودالة معالجة الحدث
إضافة مستمعين كثيرين دون حاجة
ملخص الدرس
تعرفنا في هذا الدرس على الأحداث (Events) في JavaScript، وعرفنا كيف يمكن للبرنامج الاستجابة لتفاعل المستخدم، مثل النقر والكتابة وإرسال النماذج، كما تعرفنا على Event Listener وEvent Object.
في الدرس السادس والثلاثون سنتعرف على النماذج (Forms) في JavaScript، وسنفهم كيف نقرأ بيانات المستخدم ونتحقق منها قبل معالجتها.