addEventListener وكائن Event
أضف مستمعي الأحداث، واستقبل كائن Event، واستخدم preventDefault وstopPropagation، وافهم انتشار الأحداث صعودًا.
addEventListener وكائن Event درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي الأحداث؟
الأحداث إشارات يطلقها المتصفح عند حدوث شيء ما: ينقر المستخدم، أو يضغط مفتاحًا، أو يحرّك الفأرة، أو تُحمّل الصفحة، أو يكتمل طلب شبكة. يستجيب JavaScript للأحداث عبر إرفاق مستمعي الأحداث.
صيغة addEventListener
يربط element.addEventListener(type, handler) دالةً لتعمل عند إطلاق الحدث. ويتلقى المعالج كائن Event يحوي تفاصيل ما حدث.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});أنواع الأحداث الشائعة
الفأرة: click، dblclick، mouseenter، mouseleave، mousemove. لوحة المفاتيح: keydown، keyup، keypress. النماذج: submit، input، change، focus، blur. المستند: DOMContentLoaded، load. النافذة: resize، scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));كائن الحدث
يتلقى كل معالج كائن Event. ومن خصائصه الأساسية: e.target (العنصر الذي أطلق الحدث)، e.currentTarget (العنصر المرتبط به المستمع)، e.type (اسم الحدث)، e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
يوقف event.preventDefault() الإجراء الافتراضي للمتصفح. ويُستخدم لمنع إرسال نموذج، أو منع الانتقال عبر رابط، أو إيقاف قوائم السياق التي تظهر بالنقر بزر الفأرة الأيمن في الألعاب.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
يوقف event.stopPropagation() انتشار الحدث صعودًا عبر شجرة DOM. ويُستخدم عندما يجب ألا يؤدي معالج عنصر داخلي إلى تشغيل معالج العنصر الخارجي.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});انتشار الأحداث
تنتشر الأحداث صعودًا، فبعد إطلاقها على الهدف تنتقل إلى العنصر الأب، ثم الجد، وصولًا إلى document. هكذا يعمل تفويض الأحداث: أرفقوا مستمعًا واحدًا بعنصر أب واستخدموا e.target لتحديد الابن الذي نُقر عليه فعليًا.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});نمط تفويض الأحداث
تفويض الأحداث هو الاستماع إلى الأحداث على عنصر أب بدلًا من إرفاق مستمعين بكل عنصر ابن. وهو أكثر كفاءة، كما يتعامل تلقائيًا مع العناصر الأبناء التي تُضاف ديناميكيًا.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});أحداث لوحة المفاتيح
تُطلَق أحداث لوحة المفاتيح عند الضغط على المفاتيح. استخدموا e.key (سلسلة نصية مثل 'Enter' أو 'Escape' أو 'a') في الشيفرة الحديثة. كانت الشيفرة القديمة تستخدم e.keyCode، وهو مهجور الآن. وتكشف e.metaKey وe.ctrlKey وe.shiftKey مفاتيح التعديل.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});إزالة مستمعي الأحداث
استخدموا removeEventListener لفصل مستمع. ويجب أن يكون المعالج هو مرجع الدالة نفسه، إذ لا يمكن إزالة الدوال المجهولة. في React/Vue لا تُدار هذه العملية يدويًا عادةً.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);خيار once
مرّروا { once: true } بوصفه الوسيط الثالث لإزالة المستمع تلقائيًا بعد تشغيله مرة واحدة. ويفيد ذلك في الإجراءات التي تحدث مرة واحدة، مثل إغلاق شاشة البداية.
document.querySelector('#start').addEventListener('click', startApp, { once: true });خيار capture
تُطلَق المستمعات افتراضيًا أثناء مرحلة الانتشار صعودًا. مرّروا { capture: true } لتشغيلها أثناء مرحلة الالتقاط نزولًا، قبل مستمعي الهدف نفسه.
تحقق سريع
أي أسلوب يمنع المتصفح من تنفيذ سلوكه الافتراضي لحدث ما؟
مراجعة: أحداث DOM
يربط addEventListener(type, handler) المستمعين. يوفّر كائن Event خصائص target وtype وأساليب للتحكم. يمنع preventDefault() الإجراءات الافتراضية. ويوقف stopPropagation() انتشار الأحداث. استخدموا تفويض الأحداث لتحسين الكفاءة والتعامل مع العناصر الأبناء الديناميكية. أزيلوا المستمعين لمنع تسرّب الذاكرة.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «addEventListener وكائن Event» مجاني؟
نعم — نص درس «addEventListener وكائن Event» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «addEventListener وكائن Event»؟
أضف مستمعي الأحداث، واستقبل كائن Event، واستخدم preventDefault وstopPropagation، وافهم انتشار الأحداث صعودًا. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «addEventListener وكائن Event»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- querySelector وquerySelectorAll
- addEventListener وكائن Event
- تغيير المحتوى: textContent وinnerHTML وclassList
- إنشاء العناصر وإلحاقها