event delegation کیا ہے اور اسے کیوں استعمال کریں؟

Question

Accepted Answer

**Event delegation** کا مطلب ہے ہر ایک بچے کے لیے ایک listener کی جگہ ایک مشترک پردادا کو **ایک** listener منسلک کرنا، اور **event bubbling** استعمال کرتے ہوئے یہ شناخت کرنا کہ کون سا بچہ درحقیقت انٹریکٹ کیا گیا تھا (via `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); }); ``` ## یہ کیسے کام کرتا ہے جب آپ `

` پر کلک کریں تو ، event **bubbles** اوپر کی طرف: `li → ul → body → document`۔ `

` بچے سے کلک موصول کرتا ہے ، اور `e.target` آپ کو بتاتا ہے کہ کونسی چیز کو کلک کیا گیا۔ `closest("li")` ہدف سے اوپر کی طرف چلتا ہے تاکہ مطلوبہ عنصر کو تلاش کر سکے (اندرونی عناصر پر کلک کو بھی سنبھالتا ہے)۔ ## یہ قیمتی کیوں ہے - **کارکردگی/میموری**: سیکڑوں یا ہزاروں کی جگہ ایک listener۔ - **متحرک طریقے سے شامل عناصر کے لیے خودکار طور پر کام کرتا ہے** — بعد میں شامل کیا گیا نیا `
` کو کوئی نیا listener نہیں چاہیے ، کیونکہ والدین پہلے سے ہی اسے سنبھالتے ہیں۔ - **آسان صفائی**: ایک listener ہٹائیں ، بہت سے نہیں۔ ## انتباہ یہ bubbling پر منحصر ہے ، لہذا یہ ایسی events کے لیے کام نہیں کرتا جو **bubble نہیں کرتی** (`focus`, `blur` — بجائے اس کے `focusin`/`focusout` استعمال کریں)۔ یہ بالکل وہی تکنیک ہے جو React اندرونی طور پر استعمال کرتا ہے (پوری app کے لیے ایک root listener)۔

یہ کیسے کام کرتا ہے

یہ قیمتی کیوں ہے

انتباہ