طريقة addEventListener () - رمز مثال لمستمع أحداث JavaScript

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

فهم الأحداث ومعالجات الأحداث

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

على سبيل المثال ، عندما ينتهي المستعرض من تحميل مستند ، loadوقع حدث. إذا نقر المستخدم على زر في إحدى الصفحات ، فهذا clickيعني أن حدثًا قد وقع.

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

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

يوفر JavaScript معالج حدث في شكل addEventListener()الطريقة. يمكن إرفاق هذا المعالج بعنصر HTML محدد ترغب في مراقبة الأحداث له ، ويمكن أن يكون للعنصر أكثر من معالج مرفق.

addEventListener () النحو

ها هي البنية:

target.addEventListener(event, function, useCapture) 
  • الهدف : عنصر HTML الذي ترغب في إضافة معالج الأحداث إليه. يوجد هذا العنصر كجزء من Document Object Model (DOM) وقد ترغب في التعرف على كيفية تحديد عنصر DOM.
  • الحدث : سلسلة تحدد اسم الحدث. ونحن سبق ذكره loadو clickالأحداث. للفضول ، إليك قائمة كاملة بأحداث HTML DOM.
  • دالة : تحدد الوظيفة التي سيتم تشغيلها عند اكتشاف الحدث. هذا هو السحر الذي يمكن أن يسمح لصفحات الويب الخاصة بك أن تتغير ديناميكيًا.
  • useCapture : قيمة منطقية اختيارية (صواب أو خطأ) تحدد ما إذا كان يجب تنفيذ الحدث في مرحلة الالتقاط أو الفقاعة. في حالة عناصر HTML المتداخلة (مثل imgداخل أ div) مع معالجات الأحداث المرفقة ، تحدد هذه القيمة الحدث الذي يتم تنفيذه أولاً. بشكل افتراضي ، يتم تعيينه على خطأ مما يعني أنه يتم تنفيذ معالج حدث HTML الداخلي أولاً (مرحلة الفقاعة).

addEventListener () مثال كود

هذا مثال بسيط قدمته يوضح لك addEventListener()أثناء العمل.

عندما ينقر المستخدم فوق الزر ، يتم عرض رسالة. انقر فوق زر آخر لإخفاء الرسالة. ها هي JavaScript ذات الصلة:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

الذهاب بالصيغة الموضحة سابقًا لـ addEventListener():

  • الهدف : عنصر HTML معid='button'
  • الوظيفة : وظيفة مجهولة (السهم) تقوم بإعداد الكود الضروري لكشف / إخفاء الرسالة
  • useCapture : من اليسار إلى القيمة الافتراضيةfalse

وظيفتي قادرة على كشف / إخفاء الرسالة عن طريق إضافة / إزالة فئة CSS تسمى "كشف" والتي تغير رؤية عنصر الرسالة.

بالطبع في التعليمات البرمجية الخاصة بك ، لا تتردد في تخصيص هذه الوظيفة. يمكنك أيضًا استبدال الوظيفة المجهولة بوظيفة محددة خاصة بك.

اجتياز الحدث كمعامل

قد نرغب أحيانًا في معرفة المزيد من المعلومات حول الحدث ، مثل العنصر الذي تم النقر عليه. في هذه الحالة ، نحتاج إلى تمرير معلمة حدث إلى وظيفتنا.

يوضح هذا المثال كيف يمكنك الحصول على معرف العنصر:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

هنا معلمة الحدث هي متغير مسمى eولكن يمكن بسهولة تسميته بأي شيء آخر مثل "الحدث". هذه المعلمة عبارة عن كائن يحتوي على معلومات متنوعة حول الحدث مثل معرف الهدف.

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

إزالة معالجات الأحداث

إذا لم تعد ترغب في تنشيط معالج الأحداث لسبب ما ، فإليك كيفية إزالته:

target.removeEventListener(event, function, useCapture); 

المعلمات هي نفسها addEventListener().

مع التدريب يأتي الإتقان

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

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

استمتع واذهب واصنع شيئًا رائعًا!

لمزيد من المعرفة بتطوير الويب الصديقة للمبتدئين ، قم بزيارة مدونتي على 1000 Mile World وتابعني على Twitter.