ما هي تفويض الأحداث (Event Delegation) ولماذا نستخدمها؟

Question

Accepted Answer

**تفويض الأحداث** يعني إرفاق **مستمع واحد** بسلف مشترك بدلاً من مستمع واحد لكل عنصر فرعي، واستخدام **تصعيد الأحداث** (event bubbling) لتحديد أي عنصر فرعي تم التفاعل معه بالفعل (عبر `event.target`). ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## كيفية عمله عندما تنقر على `

`، يصعد الحدث: `li → ul → body → document`. وبالتالي فإن المستمع على `

`، و`e.target` يخبرك بالعنصر الدقيق الذي تم النقر عليه. `closest("li")` يتحرك لأعلى من الهدف للعثور على العنصر المقصود (يتعامل أيضاً مع النقرات على العناصر الداخلية). ## لماذا هو قيّم - **الأداء/الذاكرة**: مستمع واحد بدلاً من مئات أو آلاف. - **يعمل تلقائياً للعناصر المضافة ديناميكياً** — العنصر `
` الجديد المضاف لاحقاً لا يحتاج إلى مستمع جديد، لأن العنصر الأب يتولى التعامل معه بالفعل. - **تنظيف أبسط**: إزالة مستمع واحد، وليس العديد. ## تحذير يعتمد على التصعيد، لذا لا يعمل مع الأحداث التي **لا تصعد** (`focus`, `blur` — استخدم `focusin`/`focusout` بدلاً منها). هذه هي بالضبط التقنية التي تستخدمها React داخلياً (مستمع واحد في الجذر للتطبيق بأكمله).

كيفية عمله

لماذا هو قيّم

تحذير