Event Delegation

Event Delegation என்பது ஜாவாஸ்கிரிப்ட் மற்றும் பிரண்ட்-எண்ட் ஆர்க்கிடெக்சரில் (Architecture) ஒரு மிகச்சிறந்த "ஸ்மார்ட்" நுட்பமாகும். பெர்பார்மென்ஸை (Performance) மேம்படுத்த நீங்கள் பயன்படுத்த வேண்டிய முக்கியமான ஆயுதம் இது.

1. What is it? (Event Delegation-ன்னா என்ன?):

ஒவ்வொரு தனித்தனி எலிமெண்டிற்கும் (உதாரணமாக 100 பட்டன்கள்) தனித்தனியாக 'Listener' வைக்காமல், அவை அனைத்தையும் உள்ளடக்கிய ஒரு பெற்றோர் எலிமெண்டிற்கு (Parent Element) மட்டும் ஒரே ஒரு லிசனர் வைக்கும் முறைதான் Event Delegation.

Example: ஒரு வகுப்பறையில் 50 மாணவர்கள் உள்ளனர். ஒவ்வொரு மாணவருக்கும் ஒரு தனித்தனி தண்ணீர் பாட்டில் கொடுப்பதற்குப் பதிலாக, வகுப்பின் நடுவில் ஒரு பொதுவான வாட்டர் டேங்க் வைத்துவிடுவது போன்றது. யார் தாகம் எடுத்தாலும் அங்கே வந்து குடித்துக்கொள்ளலாம்.

2. Why & Where? (ஏன் மற்றும் எங்கே பயன்படுத்துவது?):

Why: 1000 எலிமெண்ட்டுகள் இருந்தால், 1000 லிசனர்ஸ் வைப்பது கம்ப்யூட்டரின் மெமரியை (RAM) காலி செய்யும். ஒரே ஒரு லிசனர் வைப்பதன் மூலம் மெமரியை மிச்சப்படுத்தலாம்.
Where:

• Lists: <ul> அல்லது <table> போன்ற இடங்களில் பல வரிசைகள் இருந்தால்.
• Dynamic Content: புதியதாகச் சேர்க்கப்படும் எலிமெண்ட்டுகள் (உதாரணமாக 'Add Member' கொடுக்கும்போது வரும் புதிய லிஸ்ட்).

3. How to use? (எப்படி?):

ஈவென்ட் பப்ளிங் (Event Bubbling) என்ற தத்துவத்தின் அடிப்படையில் இது வேலை செய்கிறது. அதாவது ஒரு 'Child' எலிமெண்ட்டை கிளிக் செய்தால், அந்த சிக்னல் அதன் 'Parent'-க்கு தானாகவே செல்லும்.

// Parent-ஐ மட்டும் பிடியுங்கள்
const list = document.querySelector("#myList");

// Parent-க்கு ஒரே ஒரு லிசனர்
list.addEventListener("click", function(event) {
// எதை கிளிக் செய்தோம் என்று செக் செய்யுங்கள்
if (event.target.tagName === 'LI') {
console.log("திரைச்சுவடு: கிளிக் செய்யப்பட்ட லிஸ்ட் ஐட்டம்: " + event.target.innerText);
}
});

4. Pros and Cons (நன்மைகள் மற்றும் தீமைகள்)

நன்மைகள் (Pros):

• High Performance: மெமரியை மிகக் குறைவாகப் பயன்படுத்தும்.
• Dynamic Support: புதுசாக ஒரு எலிமெண்ட் ஆட் பண்ணினாலும் அது ஆட்டோமேட்டிக்கா வேலை செய்யும் (மறுபடி லிசனர் ஆட் பண்ண தேவையில்லை).
• Cleaner Code: 100 வரிக் கோடை 5 வரியாகக் குறைக்கலாம்.

தீமைகள் (Cons):

• Logic Complexity: கிளிக் செய்தது சரியான எலிமெண்ட்டா என்று if கண்டிஷன் போட்டு செக் செய்ய வேண்டும்.
• Event Bubbling Dependancy: சில ஈவென்ட்கள் (உதாரணம்: focus, blur) பப்ளிங் ஆகாது, அங்கே இது வேலை செய்யாது.

5. என்னென்ன ஈவென்ட்கள் இதில் வரும்? (Events suitable for Delegation):
பப்ளிங் (Bubbling) ஆகும் அனைத்து ஈவென்ட்களையும் இதில் பயன்படுத்தலாம்:

• click
• mouseover / mouseout
• keydown / keyup
• mousedown / mouseup

Note:

• Infinite Scroll (இன்ஸ்டாகிராம் மாதிரி) இல்லன்னா பெரிய Data Tables பண்ணும்போது இந்த Event Delegation இல்லாம பெர்பார்மென்ஸ் கொண்டு வர முடியாது.
• React அல்லது Angular பயன்படுத்தும்போது, அந்த பிரேம்வொர்க்குகள் உள்ளுக்குள்ளேயே (Internally) இந்த Event Delegation முறையைப் பயன்படுத்திதான் ஈவென்ட்களைக் கையாளுகின்றன. அதனால்தான் அவை அவ்வளவு வேகமாக இருக்கின்றன.