Event delegation என்பது ஒவ்வொரு குழந்தைக்கும் ஒரு listener வைப்பதற்குப் பதிலாக, பொதுவான மூலப் பிறப்புக்கு ஒரு listener மட்டுமே கணக்கிடுவது, மற்றும் event bubbling ஐ பயன்படுத்தி எந்த குழந்தை உண்மையில் தொடர்பு கொண்டது என்பதைக் கண்டறிவது (via event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
நீ <li> ஐ கிளிக் செய்தால், event bubbles மேலே: li → ul → body → document. <ul> இல் உள்ள listener இதனால் அதன் <li> குழந்தைகளிலிருந்து கிளிக் பெறுகிறது, மற்றும் e.target எந்த சரியான element கிளிக் செய்யப்பட்டது என்பதை உனக்குச் சொல்கிறது. closest("li") இலக்குவிலிருந்து மேலே நடந்து விரும்பிய element ஐக் கண்டறிகிறது (உள் வெளிப்புற கிளிக்குகளையும் கையாளுகிறது).
<li> க்கு புதிய listener தேவை இல்லை, ஏனெனில் பெற்றோர் ஏற்கனவே அதை கையாளுகிறது.இது bubbling ஐ நம்பியுள்ளது, அதனால் bubble செய்யாத event க்களுக்கு வேலை செய்யாது (focus, blur — focusin/focusout பயன்படுத்தவும்). இது React உள் பயன்படுத்தும் சரியான நுட்பம் (முழு app க்கு ஒரு root listener).