Event Bubbling - தண்ணீர் குமிழி

Event Bubbling என்பது ஜாவாஸ்கிரிப்ட் ஈவென்ட்களின் ஒரு "இயற்கையான குணம்". இந்த தத்துவத்தை (Concept) புரிந்துகொள்வது மிக முக்கியம்.

1. What is Event Bubbling? (அப்படின்னா என்ன?):

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

Example:
ஒரு அடுக்குமாடி குடியிருப்பு (Apartment). தரைத்தளத்தில் (Ground Floor) ஒரு சிறுவன் பட்டாசு வெடிக்கிறான். அந்தச் சத்தம் அப்படியே முதல் மாடி, இரண்டாம் மாடி என மேலே இருப்பவர்களுக்கும் கேட்கும் இல்லையா? அதுதான் பப்ளிங்!

2. Why it happens? (ஏன் இப்படி நடக்குது?):

பிரவுசர்கள் இப்படித்தான் வடிவமைக்கப்பட்டுள்ளன. ஒரு எலிமெண்ட் என்பது அதன் Parent-க்குள் ஒரு பகுதிதான். எனவே, ஒரு 'Child'-ல் நடக்கும் விஷயம் 'Parent'-க்கும் தெரிந்தால்தான் Event Delegation போன்ற ஸ்மார்ட் வேலைகளைச் செய்ய முடியும்.

3. How to find it? (எப்படி நடக்குதுன்னு கண்டுபிடிக்கிறது?):
இதை ஒரு சின்ன டெஸ்ட் மூலம் கண்டுபிடிக்கலாம். ஒரு DIV-க்குள் ஒரு BUTTON வைப்போம்.

<div onclick="alert('DIV Clicked!')">
<button onclick="alert('BUTTON Clicked!')">கிளிக் செய்</button>
</div>

இப்போது நீங்கள் பட்டனை கிளிக் செய்தால்:

1. முதலில் "BUTTON Clicked!" அலர்ட் வரும்.
2. அது முடிந்ததும் தானாகவே "DIV Clicked!" அலர்ட் வரும். ஏன்? பட்டனில் தொடங்கிய அந்த 'கிளிக்' சிக்னல் அப்படியே மேலே பப்ளிங் ஆகி DIV-க்கும் போயிருச்சு!

4. How it Works? (இதன் படிநிலைகள்):

Stage 1: Capturing Phase (The Journey Down):
ஈவென்ட் மேலிருந்து (Window/Document) தொடங்கி, நீங்கள் கிளிக் செய்த எலிமெண்ட் (Target) வரை கீழே நோக்கி வரும்.

Example: டெலிவரி பாய் அப்பார்ட்மெண்ட் மெயின் கேட்டிற்கு வருகிறார். அங்கிருந்து லிஃப்ட் அல்லது படிக்கட்டு வழியாக 1-வது மாடி, 2-வது மாடி எனத் தாண்டி 5-வது மாடியை நோக்கி கீழே (உள்ளே) இறங்கி வருகிறார்.

Technical: Window -> Document -> Body -> Parent -> Child.
Note: Default-ஆக நாம் இதைக் கவனிக்க முடியாது, ஆனால் addEventListener(..., true) என்று கொடுத்தால் இந்த ஸ்டேஜைப் பிடிக்கலாம்.

Stage 2: Target Phase (The Delivery):
ஈவென்ட் நீங்கள் கிளிக் செய்த அந்த குறிப்பிட்ட எலிமெண்ட்டை வந்தடையும்.

Example: டெலிவரி பாய் 5-வது மாடியில் உள்ள சரியான கதவைத் தட்டி, அந்த நபரிடம் பார்சலைக் கொடுக்கிறார். இதுதான் முக்கியமான இடம் (Target).

Technical: நீங்கள் எந்த பட்டனை அல்லது DIV-ஐ கிளிக் செய்தீர்களோ, அங்கு அந்த ஈவென்ட் 'Trigger' ஆகும்.

Stage 3: Bubbling Phase (The Journey Back Up):
பார்சலைக் கொடுத்த பிறகு, அந்த சிக்னல் மீண்டும் கீழிருந்து மேல் நோக்கி (Parent-களுக்கு) பரவும்.

Example: பார்சலை வாங்கிய நபர் சந்தோஷத்தில் சத்தம் போடுகிறார். அந்தச் சத்தம் அவர் வீட்டுக்கு வெளியே கேட்டு, 4-வது மாடி, 3-வது மாடி என மெயின் கேட் வரை மேலே பரவுகிறது.

Technical: Child -> Parent -> Body -> Document -> Window.
Importance: 99% டெவலப்பர்கள் இந்த ஸ்டேஜைத்தான் Event Delegation செய்யப் பயன்படுத்துகிறார்கள்.

5. How to STOP it? (இதை எப்படி நிறுத்துவது?):

சில நேரம் உங்களுக்குப் பப்ளிங் தலைவலியாக இருக்கலாம். ஒரு பட்டனை அழுத்தினால் அந்த வேலை மட்டும் நடந்தால் போதும், Parent-க்கு சிக்னல் போகக் கூடாது என நினைத்தால் event.stopPropagation() பயன்படுத்தலாம்.

Real-time Example:
சிறுவன் பட்டாசு வெடிக்கும்போது, வீட்டின் ஜன்னல்களைச் சாத்திவிட்டால் (Stop Propagation), சத்தம் மேலே போகாது.
button.addEventListener("click", function(event) {
alert("பட்டன் மட்டும் வேலை செய்யும்!");
event.stopPropagation(); // இதோட நிறுத்து, மேல போகாதே!
});

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

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

• Event Delegation: ஒரு மெயின் லிசனர் வச்சே எல்லாத்தையும் கவனிக்கலாம்.
• Simplicity: மெமரியை மிச்சப்படுத்தும் (RAM save ஆகும்).

தீமைகள் (Cons):

• Accidental Triggers: தேவையில்லாத Parent வேலைகளும் நடக்கும்.
• Logic Bugs: கவனிக்காவிட்டால் பெரிய ஆப்ஸில் குழப்பத்தை உண்டாக்கும்.

Note:

• StopPropagation vs StopImmediatePropagation: stopPropagation சிக்னலை மேலே போகாமல் தடுக்கும். ஆனால் அதே பட்டனில் வேறு ஒரு லிசனர் இருந்தால் அது வேலை செய்யும். அதை நிறுத்த stopImmediatePropagationபயன்படுத்த வேண்டும்.
• Debugging: பிரவுசர் கன்சோலில் event.bubbles என்று செக் செய்தால், அந்த ஈவென்ட் பப்ளிங் ஆகுமா இல்லையா (True/False) என்று தெரிந்துவிடும்.
• Modern Apps: ரியாக்ட் 19-ல் கூட இந்த பப்ளிங் தத்துவத்தை வைத்துதான் அனைத்து ஈவென்ட்களும் கையாளப்படுகின்றன.

Conclusion:

• ஈவென்ட் பப்ளிங் என்பது ஒரு நதி (River) மாதிரி. அதன் ஓட்டத்தைப் புரிந்துகொண்டால் (Event Delegation) நீங்கள் அதைப் பயன்படுத்திக்கொள்ளலாம், இல்லையென்றால் அணை (Stop Propagation) போட்டுத் தடுத்துவிடலாம்!