الدرس 5 من 8

تفويض الأحداث

هدف الدرس

مستمع واحد لعناصر تتغيّر

01

الشرح

لو ربطت مستمعًا بكل زر حذف، ماذا يحدث للأزرار التي تُضاف بعد ذلك؟ لا شيء — لم يكن لها مستمع يوم ربطت.

الحلّ أن الحدث يصعد من العنصر المضغوط إلى آبائه. فتربط مستمعًا واحدًا بالحاوية، وتسأل داخله: من المضغوط فعلًا؟

event.target.closest('.del') يجيب: العنصر المضغوط أو أقرب جدّ له يطابق المُحدِّد، وإلا null.

02

المطلوب

مستمع واحد على #list يحذف العنصر عند الضغط على زر حذفه — بما في ذلك العناصر المُضافة لاحقًا.

معايير التصحيح

4 معايير
  1. الضغط على «حذف» يزيل عنصره
  2. الضغط داخل العنصر بعيدًا عن الزر لا يحذف شيئًا
  3. يعمل على عنصر أُضيف بعد ربط المستمع
  4. مستمع واحد فقط: حذف عنصرين متتاليين يعمل
index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل» ليبدأ الفحص.

4 معايير في بطاقة «المطلوب».