تعتمد العديد من تطبيقات الويب على شكل من أشكال الأحداث لأداء وظائفها. في مرحلة ما ، يتفاعل الإنسان مع واجهته ، مما يؤدي إلى إنشاء حدث. تعتمد هذه الأحداث التي يقودها الإنسان عادةً على جهاز طرفي ، مثل الماوس أو لوحة المفاتيح.

عندما ينشئ جهاز حدثًا ، يمكن للبرنامج الاستماع إليه ، لمعرفة متى يجب القيام بسلوك معين. في هذا البرنامج التعليمي ، ستتعلم كيفية الاستماع إلى الأحداث باستخدام JavaScript.

ما هي البرمجة المدفوعة بالحدث؟

البرمجة المدفوعة بالأحداث هي اسم النموذج الذي يعتمد على تنفيذ حدث لأداء وظائفه. من الممكن إنشاء برنامج يعتمد على الأحداث بأي لغة برمجة عالية المستوى. لكن البرمجة التي تعتمد على الأحداث هي الأكثر شيوعًا في لغات مثل JavaScript التي تتكامل مع واجهة المستخدم.

ما هو مستمع الحدث؟

مستمع الحدث هو وظيفة تبدأ عملية محددة مسبقًا في حالة حدوث حدث معين. لذلك ، "يستمع" مستمع الحدث إلى إجراء ما ، ثم يستدعي وظيفة تؤدي مهمة ذات صلة. يمكن أن يتخذ هذا الحدث أحد الأشكال العديدة. تتضمن الأمثلة الشائعة أحداث الماوس وأحداث لوحة المفاتيح وأحداث النافذة.

إنشاء مستمع حدث باستخدام JavaScript

يمكنك الاستماع للأحداث على أي

عنصر في DOM. يحتوي JavaScript على ملف addEventListener () وظيفة يمكنك من خلالها استدعاء أي عنصر على صفحة الويب. ال addEventListener () الوظيفة هي طريقة EventTarget واجهه المستخدم. تقوم كافة الكائنات التي تدعم الأحداث بتنفيذ هذه الواجهة. يتضمن هذا النافذة والمستند والعناصر الفردية على الصفحة.

الوظيفة addEventListener () لها البنية الأساسية التالية:

element.addEventListener ("حدث"، functionToExecute) ؛

أين:

• ال جزء يمكن أن تمثل أي علامة HTML (من زر إلى فقرة)
• ال "حدث" عبارة عن سلسلة تسمي إجراءً محددًا ومعترفًا به
• ال functionToExecute هو إشارة إلى وظيفة موجودة

لنقم بإنشاء صفحة الويب التالية التي تحتوي على بعض عناصر HTML:

مرحبا


 مرحبا، مرحبا بكم في موقعي.


يتعلم أكثر





معلومات المستخدم

اسم االمستخدم: 

إرسال

يُنشئ كود HTML أعلاه صفحة بسيطة ترتبط بملف JavaScript يسمى app.js. ال app.js سيحتوي الملف على رمز إعداد مستمعي الحدث. لذلك ، إذا كنت ترغب في بدء عملية محددة عندما ينقر المستخدم على الزر الأول على صفحة الويب ، فهذا هو الملف الذي سيتم إنشاؤه فيه.

ملف app.js

document.querySelector ('. btn'). addEventListener ("انقر" ، انقر فوق عرض)
وظيفة clickDemo () {
 console.log ("مرحبًا")
}

يصل كود JavaScript أعلاه إلى الزر الأول في الصفحة باستخدام ملف محدد الاستعلام () وظيفة. ثم يضيف مستمع حدث إلى هذا العنصر باستخدام addEventListener () طريقة. الحدث المحدد الذي يستمع إليه يحمل اسم "انقر". عندما يقوم الزر بتشغيل هذا الحدث ، سيقوم المستمع باستدعاء clickDemo () وظيفة.

متعلق ب: تعرف على كيفية استخدام محددات DOM

ال clickDemo () تقوم الوظيفة بطباعة "مرحبًا" إلى وحدة تحكم المتصفح. في كل مرة تنقر فوق الزر ، يجب أن ترى هذا الإخراج في وحدة التحكم الخاصة بك.

إخراج الحدث "انقر"

ما هي أحداث الماوس؟

يحتوي JavaScript على ملف MouseEvent واجهة تمثل الأحداث التي تحدث بسبب تفاعل المستخدم مع الماوس. تستخدم العديد من الأحداث ملف MouseEvent واجهه المستخدم. تشمل هذه الأحداث ما يلي:

• انقر
• dblclick
• تحرك الماوس
• تمرير الماوس
• تجاوز الماوس
• فأر
• الفأرة

ال انقر يحدث الحدث عندما يضغط المستخدم على زر الماوس ويحرره بينما يكون المؤشر فوق عنصر. هذا بالضبط ما حدث في المثال السابق. كما ترى من القائمة أعلاه ، يمكن أن تتخذ أحداث الماوس عدة أشكال.

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

إضافة حدث dblclick إلى الزر الأول

document.querySelector ('. btn'). addEventListener ("dblclick"، dblclickDemo)
الوظيفة dblclickDemo () {
 تنبيه ("هذا عرض توضيحي لكيفية إنشاء حدث نقر مزدوج")
}

ستؤدي إضافة الكود أعلاه إلى ملف app.js إلى إنشاء مستمع ثاني للحدث بشكل فعال للزر الأول على صفحة الويب. لذلك ، سيؤدي النقر فوق الزر الأول مرتين إلى إنشاء التنبيه التالي في المتصفح:

في الصورة أعلاه ، سترى التنبيه الذي تم إنشاؤه ، وستلاحظ أيضًا وجود ناتجين آخرين "مرحبًا بكم" في وحدة التحكم. ويرجع ذلك إلى أن حدث النقر المزدوج عبارة عن مزيج من حدثين للنقر وهناك مستمعون للأحداث لكل من انقر و ال dblclick الأحداث.

تصف أسماء أحداث الماوس الأخرى في القائمة سلوكها. ال تحرك الماوس يقع الحدث في كل مرة يحرك فيها المستخدم الماوس عندما يكون المؤشر فوق عنصر. ال فأر يحدث الحدث عندما يضغط المستخدم باستمرار على زر فوق عنصر ، ثم يحرره.

ما هي أحداث لوحة المفاتيح؟

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

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

بالرجوع إلى مثال HTML أعلاه ، فإن أفضل مكان لإضافة مستمع لحدث لوحة المفاتيح هو إدخال جزء.

إضافة مستمع أحداث لوحة المفاتيح إلى ملف app.js

اسمحوا تحياتي = document.querySelector ('p') ؛
document.querySelector ('input'). addEventListener ("keyup"، captureInput)
وظيفة التقاط الإدخال (هـ) {
 reetings.innerText = (`مرحبًا $ {e.target.value} ، مرحبًا بكم في موقع الويب الخاص بي.`)
}

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

في هذا المثال ، التسمية المرفقة بامتداد إدخال يطلب الحقل اسم مستخدم. إذا قمت بكتابة اسمك في حقل الإدخال ، فستظهر صفحة الويب بالشكل التالي:

تحتوي الفقرة الآن على قيمة الإدخال التي ، في المثال أعلاه ، "Jane Doe".

addEventListener يلتقط جميع أنواع تفاعل المستخدم

قدم لك هذا المقال إلى addEventListener () بالإضافة إلى العديد من أحداث الماوس ولوحة المفاتيح التي يمكنك استخدامها معها. في هذه المرحلة ، تعرف كيفية الاستماع إلى حدث معين ، وكيفية إنشاء وظيفة تستجيب له.

ال addEventListener يوفر قدرة إضافية ، ومع ذلك ، من خلال المعلمة الثالثة. يمكنك استخدامه للتحكم في انتشار الحدث: الترتيب الذي تنتقل به الأحداث من العناصر إلى والديهم أو أطفالهم.

فهم انتشار الأحداث في جافا سكريبت

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

اقرأ التالي

عن المؤلف