JavaScript Academy · درس

أساسيات addEventListener

أرفقوا معالجات بالعناصر للتعامل مع الأحداث.

أساسيات addEventListener درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

الاستجابة للأحداث

تتيح الأحداث لشيفرتكم الاستجابة لإجراءات المستخدم مثل النقرات وضغطات المفاتيح وإرسال النماذج. وتُعدّ addEventListener الطريقة القياسية للاشتراك فيها.

البنية الأساسية

استدعوا addEventListener مع اسم حدث ودالة معالجة. وتُشغَّل دالة المعالجة في كل مرة يحدث فيها الحدث.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

دوال المعالجة المسماة

يمكنكم تمرير دالة مسماة. يحافظ ذلك على تنظيم الشيفرة، والأهم أنه يتيح لكم إزالة المستمع لاحقًا.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

مستمعون متعددون

بخلاف خاصية onclick القديمة، يمكنكم إرفاق مستمعين متعددين بالحدث نفسه من دون أن يحل أحدهم محل الآخر.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

لإيقاف الاستماع، استدعوا removeEventListener باستخدام اسم الحدث نفسه ومرجع الدالة نفسه اللذين استخدمتموهما عند إضافته.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

لا يمكن إزالة الدوال المجهولة

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

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

خيار once

تؤدي كتابة { once: true } إلى إزالة المستمع تلقائيًا بعد تشغيله مرة واحدة.

btn.addEventListener("click", init, { once: true });

خيار capture

تعمل المستمعات افتراضيًا أثناء مرحلة الانتشار التصاعدي. أما { capture: true } فتجعلها تعمل أثناء مرحلة الالتقاط بدلًا من ذلك.

parent.addEventListener("click", handler, { capture: true });

خيار passive

تَعِد { passive: true } بأنكم لن تستدعوا preventDefault، مما يتيح للمتصفح تحسين أداء التمرير.

window.addEventListener("scroll", onScroll, { passive: true });

خيار signal

يتيح لكم signal الخاص بـ AbortController إزالة مستمع واحد أو عدة مستمعين عن طريق الإلغاء، وهو مفيد لتنظيف الموارد.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this داخل دوال المعالجة

في دالة معالجة عادية، تشير this إلى العنصر المرتبط به المستمع. أما دوال السهم فلا تعيد ربط this.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

اختبار سريع

اختبروا قواعد الإزالة.

مراجعة

تشترك addEventListener(type, handler, options) في الأحداث وتدعم مستمعين متعددين. أزيلوا المستمعين باستخدام removeEventListener مع المرجع نفسه، ولذلك يُفضّل استخدام الدوال المسماة. ومن الخيارات المفيدة once وcapture وpassive وsignal. وفي دوال المعالجة العادية، يشير this إلى العنصر المستهدف.

الأسئلة الشائعة

هل درس «أساسيات addEventListener» مجاني؟

نعم — نص درس «أساسيات addEventListener» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «أساسيات addEventListener»؟

أرفقوا معالجات بالعناصر للتعامل مع الأحداث. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «أساسيات addEventListener»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy