شرح صفوف ومحتوى الفقرة
لنفترض وجود قائمة مهام تضم 200 عنصر مع زر يضيف عناصر <li> جديدة ديناميكياً؛ ربط 200 مستمع منفصل يستهلك الذاكرة ولا يشمل العناصر المضافة لاحقاً تلقائياً. يحل نمط تفويض الأحداث هذه المعضلة بوضع مستمع واحد فقط على القائمة الأب <ul> استناداً لطور الفقاعة!
وداخل مستمع الأب نستدعي e.target.closest("button.del-btn") للعثور بدقة وأمان على زر الإجراء المقصود (حتى لو نقر الزائر على نص فرعي بداخل الزر) فيعمل فوراً مع العناصر الحالية والمستقبلية.
let id = 3;
const list = document.getElementById('task-list');
document.getElementById('add-task').onclick = function () {
const li = document.createElement('li');
li.innerHTML = 'Task #' + (id++) +
' <button type="button" class="del">Remove</button>';
list.appendChild(li);
};
list.addEventListener('click', function (e) {
const btn = e.target.closest('button.del');
if (btn && list.contains(btn)) btn.closest('li').remove();
});ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اختتمت الفصل العاشر بإتقان أطوار انتشار الحدث الثلاثة (الالتقاط والهدف والفقاعة)، والتمييز بين e.target وe.currentTarget، وضبط الصعود عبر e.stopPropagation()، وتطبيق نمط تفويض الأحداث الذكي مع closest(). الخطوة التالية: ابدأ الفصل الحادي عشر بدرس «التنقل داخل شجرة DOM» لاستكشاف علاقات الآباء والأبناء والأشقاء.