جافاسكربتالأحداث
- مفهوم الأحداث
- الأحداث الأكثر استخداماً
- إضافة حدث للعنصر
- أشكال دالة تنفيذ الحدث
- الحصول على معلومات الحدث
- حذف حدث من العنصر
- تعريف الحدث أكثر من مرة
- الأحداث و المؤثرات البصرية
- أمثلة متنوعة على الأحداث
مفهوم الأحداث
الأحداث ( Events ) هي أشياء نتوقع حدوثها في صفحة الويب و عند حدوثها نستطيع تنفيذ أوامر معينة.
إذاً من خلال الأحداث يمكنك رصد أي تفاعل يجريه المستخدم مع الصفحة.
الأشياء التي يمكنك ترقّب حدوثها في المتصفح كثيرة جداً فمثلاً يمكنك معرفة متى يقوم المستخدم بتحريك الماوس، متى ينقر على الأزرار، متى يكتب شيء ما في الحقول، متى ينزل في الصفحة لمشاهدة المحتوى الموجود فيها، متى يكبّر أو يصغّر نافذة المتصفح و غيرها من الأمور التي يمكنك رصدها.
الأحداث الأكثر استخداماً
هناك عدد كبير جداً من الأحداث التي يمكنك استخدامها في عالم الويب و لكننا سنتطرق للأحداث الأكثر استخداماً و التي يجب عليك معرفتها.
الحدث | استخدامه |
---|---|
click | يتم إطلاق هذا الحدث عندما يتم النقر على العنصر سواء بواسطة الماوس أو الكيبورد. |
keyup | يتم إطلاق هذا الحدث بعد أن يتم إدخال حرف من الكيبورد و رفع الإصبع عن الزر. |
keydown | يتم إطلاق هذا الحدث أثناء النقر على حرف من الكيبورد و قبل أن يتم رفع الإصبع عن الزر. |
keypress | يتم إطلاق هذا الحدث بشكل مستمر إذا تم النقر على حرف من الكيبورد و تم إبقاء الإصبع على الزر. |
mousemove | يتم إطلاق هذا الحدث عند تحريك مؤشر الماوس فوق العنصر. |
mouseover | يتم إطلاق هذا الحدث بعد أن يتم تمرير مؤشر الماوس فوق العنصر. |
mouseout | يتم إطلاق هذا الحدث بعد أن يصبح مؤشر الماوس خارج حدود العنصر. |
change | يتم إطلاق هذا الحدث عندما يتم تغيير قيمة العنصر. |
focus | يتم إطلاق هذا الحدث عندما يكون مربّع التركيز الذي يشير إلى العنصر الحالي موجود عند العنصر. |
blur | يتم إطلاق هذا الحدث عندما يكون مربع التركيز الذي يشير إلى العنصر الحالي غير موجود عند العنصر. |
submit | يتم إطلاق هذا الحدث عندما يتم إرسال بيانات النموذج إلى السيرفر. |
load | يتم إطلاق هذا الحدث عندما يتم تحميل جميع ملفات التصميم، السكربتات، الخطوط, الصور إلخ.. التابعة للصفحة. |
resize | يتم إطلاق هذا الحدث عندما يتم تغيير حجم المتصفح من أطرافه بواسطة الماوس. |
في حال ذكر أسماء الأحداث كخصائص فإنها نبدأها بكلمة 'on' فنقول 'onclick'، 'onchange'، 'onkeyup' و هكذا.
إضافة حدث للعنصر
هناك ثلاث طرق يمكن إتباعها لجعل العنصر يتعامل مع الحدث الذي قد يقع و هي:
- إضافة الحدث كخاصية بشكل مباشر في الوسم (Inline Event Handler) و هذا هو الخيار الأسهل و لكنه ليس الأفضل.
- إضافة الحدث كخاصية للعنصر بواسطة جافاسكربت (Event Handler Property) و لكن هذا الخيار ليس الأقوى.
- إضافة الحدث كمستمع بواسطة جافاسكربت (Event Listener) و هذا الخيار الأفضل و الأكثر مرونة.
حتى تلاحظ الفرق بين الأساليب الثلاثة في إضافة الأحداث، سنقوم بكتابة المثال نفسه بطرق مختلفة. سنضيف الحدث click للوسم <button> لجعله ينفذ دالة إسمها showAlert() كلما تم النقر عليه. هذه الدالة تقوم بإظهار نافذة تنبيه منثبقة في كل مرة ننقر فيها على الزر.
1- أسلوب Inline Event Handler
في المثال التالي أضفنا الحدث onclick بشكل مباشر في الوسم <button> بهدف تنفيذ دالة إسمها showAlert() كلما تم النقر عليه.
مثال
2- أسلوب Event Handler Property
في المثال التالي مررنا الدالة التي نريد تنفيذها في حال حصول الحدث click كخاصية للعنصر الذي يملك id يساوي 'myBtn'.
مثال
3- أسلوب Event Listener
في المثال التالي قمنا بإضافة الحدث 'click' و الدالة التي نريد تنفيذها في حال حصوله من خلال استدعاء الدالة addEventListener() من العنصر الذي يملك id يساوي 'myBtn'.
مثال
أشكال دالة تنفيذ الحدث
الدالة التي يتم تنفيذها عند وقوع الحدث يمكن أن تكون دالة عادية لا إسم لها، دالة سهمية، أو إسم فقط يشير إلى الدالة التي ستتنفذ. كما أنه يمكن إضافة باراميتر فيها مما يجعلنا قادرين على الوصول إلى معلومات متعلقة بالحدث نفسه.
تمرير دالة بدون إسم
في المثال التالي قمنا بتمرير دالة لا إسم لها ليتم تنفيذها عند وقوع الحدث click.
مثال
تمرير دالة سهمية
في المثال التالي قمنا بتمرير دالة سهمية ليتم تنفيذها عند وقوع الحدث click.
مثال
تمرير إسم الدالة فقط
في المثال التالي قمنا بتعريف الدالة التي نريد تنفيذها عند حصول الحدث و من ثم قمنا بتمرير إسمها فقط ليتم تنفيذها عند وقوع الحدث click.
مثال
الحصول على معلومات الحدث
في أوقات كثيرة قد تحتاج لمعرفة معلومات موجودة في الحدث الذي وقع و إليك بعض الأمثلة العملية:
- في أداة تعلم الطباعة نراقب كل حرف يدخله المستخدم لمعرفة ما إن كان صحيحاً أم لا و أيضاً لعرض الحرف الذي أدخله له.
- في أداة رسم الأشكال بواسطة CSS نراقب موقع كل نقطة يحركها المستخدم حتى نغيير إحداثيات الرسم في الكود.
- في دورة اللغة الإنجليزية نراقب أي كلمة أو جملة إنجليزية يتم النقر عليها حتى نقوم بقراءتها سمعياً و هكذا.
الآن، للوصول إلى المعلومات المرتبطة بالحدث الذي وقع فإنه يجب إضافة باراميتر واحد في الدالة التي تنّفذ الحدث و هكذا يصبح بإمكانك الوصول إلى خصائص الحدث نفسه من خلال هذا الباراميتر.
في المثال التالي قمنا بإضافة باراميتر في الدالة التي تنفذ الحدث حتى نستطيع الوصول لمعلومات الحدث نفسه، فمثلاً من خلال هذا الباراميتر نستطيع عرض نوع الحدث (Event Type).
مثال
يمكنك وضع أي إسم تريد للباراميتر الذي يمثّل الحدث و لكن المتعارف عليه هو استخدام الإسم event أو الحرف e إن أردت اختصار الإسم.
حذف حدث من العنصر
في حال كان العنصر يعرف فقط إسم الدالة التي سيقوم بتنفيذها عند وقوع الحدث فإنه يمكن استخدام الدالة removeEventListener() لإزالة الحدث من العنصر، أي لجعله و كأنه غير موضوع من الأساس فيه.
في المثال التالي قمنا بتعريف دالة إسمه showCount() يتم تنفيذها عند وقوع الحدث click في الزر.
مهمة هذه الدالة حساب و طباعة كم مرة يقوم المستخدم بالنقر على الزر.
عندما يتم النقر ثلاث مرات على الزر فإنه سيتم إزالة الحدث click منه لجعله لا ينفذ الدالة showCount() من جديد.
مثال
تعريف الحدث أكثر من مرة
يمكن إضافة الحدث للعنصر بواسطة الدالة addEventListener() أكثر من مرة، مما يعني أنك قادر الإستماع للحدث من عدة أماكن في الكود.
في المثال التالي قمنا بإضافة الحدث click مرتين للزر.
مثال
الأحداث و المؤثرات البصرية
في المثال التالي أضفنا الحدث click للوسم <button>.
هذه الدالة تقوم بإضافة/إزالة الكلاس 'dark-mode' بشكل متناوب من الوسم <body> في كل مرة ننقر فيها على الزر.
مثال
أمثلة متنوعة على الأحداث
مراقبة الأحرف التي يتم إدخالها
في المثال التالي أضفنا الحدث keyup
للوسم <input> بهدف معرفة ما هو آخر زر في الكيبورد قام المستخدم بالنقر عليه و رفع إصبعه عنه و ما هو رقم الترميز الخاص به.
مثال
مراقبة موقع الماوس
في المثال التالي أضفنا الحدث mouse
للوسم <div> بهدف معرفة إحداثيات مؤشر الماوس حين يتم تمريره فوقه.
المثال الأول
في المثال التالي أضفنا الحدث mouseover
و الحدث mouseout
للوسم <div> بهدف معرفة ما إن كان مؤشر الماوس فوقه أم لا.
المثال الثاني
مراقبة أي تغيير في القيمة
في المثال التالي أضفنا الحدث change
للوسم <select> بهدف مراقبة أي تغيير جديد في القيمة المختارة فيه حالياً.
مثال
مراقبة العنصر الذي يقف عنده المستخدم
في المثال التالي أضفنا الحدثين focus
و blur
للوسم <input> بهدف معرفة ما إن كان المستخدم يقف عنده أم لا.
مثال
مراقبة بيانات النموذج قبل إرسالها للسيرفر
في المثال التالي أضفنا الحدث submit
للوسم <form> بهدف التدقيق على بيانات النموذج قبل إرسالها للسيرفر.
مثال
معرفة متى تم إكتمال تحميل الصفحة
في المثال التالي أضفنا الحدث load
للوسم window الذي يمثل الصفحة نفسها بهدف معرفة متى ينتهي المتصفح من تحميل محتواها.
مثال
مراقبة أي تغيير يحصل في حجم الصفحة
في المثال التالي أضفنا الحدث resize
للوسم window الذي يمثل الصفحة نفسها بهدف معرفة كم هو حجم الصفحة الحالي كلما تم تغيير حجم المتصفح بواسطة الماوس.