event delegation என்றால் என்ன மற்றும் ஏன் பயன்படுத்த வேண்டும்?

Question

IT Interview Practice · 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` எந்த சரியான element கிளிக் செய்யப்பட்டது என்பதை உனக்குச் சொல்கிறது. `closest("li")` இலக்குவிலிருந்து மேலே நடந்து விரும்பிய element ஐக் கண்டறிகிறது (உள் வெளிப்புற கிளிக்குகளையும் கையாளுகிறது). ## ஏன் இது மূல்யமானது - **செயல்திறன்/நினைவு**: நூற்றுக்கணக்கான அல்லது ஆயிரங்களுக்கு பதிலாக ஒரு listener. - **மாறும் சேர்க்கப்பட்ட element க்களுக்கு தானாக வேலை செய்கிறது** — பின்னர் சேர்க்கப்பட்ட ஒரு புதிய `
` க்கு புதிய listener தேவை இல்லை, ஏனெனில் பெற்றோர் ஏற்கனவே அதை கையாளுகிறது. - **எளிய சுத்தம்**: ஒரு listener ஐ அகற்று, பல அல்ல. ## எச்சரிக்கை இது bubbling ஐ நம்பியுள்ளது, அதனால் **bubble செய்யாத** event க்களுக்கு வேலை செய்யாது (`focus`, `blur` — `focusin`/`focusout` பயன்படுத்தவும்). இது React உள் பயன்படுத்தும் சரியான நுட்பம் (முழு app க்கு ஒரு root listener).

இது எவ்வாறு செயல்படுகிறது

ஏன் இது மূல்யமானது

எச்சரிக்கை

தொடர்புடைய கேள்விகள்