ما هو الـ addEventListener في جافاسكريبت واستخداماته؟

تم شرح الأمر في النقاشات والدروس التالية:

بعض الأمثلة العملية على الـ `addEventListener` للتوضيح :

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

يمكن استخدام الـ `addEventListener` لإضافة مستمع لحدث النقر على زر، وتنفيذ وظيفة معينة عند النقر عليه. يمكن استخدام هذا النوع من المستمعات لتفعيل إجراءات مثل إظهار قائمة منبثقة أو تغيير نوع العرض أو تحميل محتوى جديد، وهذا مثال بسيط على ذلك:

<button id="myBtn">Click me</button>

const btn = document.querySelector('#myBtn');

btn.addEventListener('click', () => {
  console.log('You clicked the button!');
});

عند النقر على الزر، سيتم استدعاء الدالة المحددة (`console.log`) وسيتم عرض "You clicked the button!" في وحدة التحكم في المتصفح.

•  إضافة مستمع لحدث إدخال النص على حقل نص:

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

<input type="text" id="myInput">

const input = document.querySelector('#myInput');

input.addEventListener('input', () => {
  console.log(`You typed: ${input.value}`);
});

عندما يقوم المستخدم بإدخال نص على حقل النص، سيتم استدعاء الدالة المحددة (`console.log`) وسيتم عرض "You typed: [النص الذي تم إدخاله]" في وحدة التحكم في المتصفح.

• إضافة مستمع لحدث التحميل على صفحة الويب:

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

window.addEventListener('load', () => {
  console.log('The page has loaded!');
});

عندما يتم تحميل الصفحة بالكامل، سيتم استدعاء الدالة المحددة (`console.log`) وسيتم عرض "The page has loaded!" في وحدة التحكم في المتصفح.