Inline Event Handlers

Inline Event Handlers என்பது ஜாவாஸ்கிரிப்ட் Event களைக் கையாள்வதற்கான ஆரம்பகால மற்றும் மிக எளிய முறையாகும்.

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

ஜாவாஸ்கிரிப்ட் கோடைத் தனியாக எழுதாமல், நேரடியாக HTML டேக் (Tag) உள்ளேயே ஒரு அட்ரிபியூட் (Attribute) போல எழுதுவதுதான் Inline Event Handler. இது on என்ற வார்த்தையுடன் தொடங்கும் (உதாரணம்: onclick, onmouseover).

Example: ஒரு ஸ்கூல் யூனிஃபார்ம் சட்டையிலேயே "யாராவது கை கொடுத்தால் வணக்கம் சொல்லு" என்று பிரிண்ட் செய்து வைத்திருப்பது போன்றது. அந்தச் சட்டையைப் போடுபவர் தானாகவே அந்த வேலையைச் செய்வார்.

2. Why & Where? (ஏன் மற்றும் எங்கே பயன்படுத்துவது?):
Why: மிகச்சிறிய வேலைகளை (உதாரணத்திற்கு ஒரு பட்டனை அழுத்தினால் அலர்ட் காட்டுவது) உடனே செய்வதற்கு இது எளிது.
Where: பெரும்பாலும் டெமோக்கள் காட்டும்போது அல்லது மிகச்சிறிய HTML கோப்புகளில் மட்டும் இதைப் பயன்படுத்துவார்கள்.

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

<!-- HTML-லேயே ஜாவாஸ்கிரிப்ட் எழுதுவது -->
<button onclick="alert('திரைச்சுவடு-விற்கு வரவேற்கிறோம்!')">கிளிக் செய்</button>

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

நன்மைகள் (Pros)

• மிக எளிதாகப் புரியும், சிறிய கோடுகளுக்கு வேகமானது.
• எதையும் செட்டப் செய்யாமல் உடனே டெஸ்ட் செய்ய உதவும்.

தீமைகள் - Problems (Cons)

• HTML மற்றும் JS இரண்டையும் கலப்பதால் கோடு குழப்பமாக (Messy) மாறும்.
• 100 பட்டன்கள் இருந்தால், ஒவ்வொன்றிலும் போய் மாற்றிக் கொண்டிருக்க வேண்டும்.
• ஒரு ஈவென்ட்டிற்கு ஒரு வேலையை மட்டுமே செய்ய முடியும். (ஒரே பட்டனில் ரெண்டு onclick போட முடியாது).
• இது XSS (Cross-Site Scripting) தாக்குதல்களுக்கு வழிவகுக்கும், பாதுகாப்பு குறைவு.

5. என்னென்ன ஈவென்ட்கள் இதில் வரும்? (Events List)
W3Schools-ல் நீங்கள் பார்த்த அனைத்து ஈவென்ட்களையும் இதிலும் பயன்படுத்தலாம்: All Events Reference
onclick(கிளிக் செய்யும்போது)
onmouseover(மவுஸ் மேலே வரும்போது)
onkeydown(கீபோர்டு பட்டன் அழுத்தும்போது)
onload(பக்கம் லோடு ஆகும்போது)
onsubmit(ஃபார்ம் அனுப்பும்போது)

Note:
நவீன காலத்தில் நாம் React அல்லது Angular பயன்படுத்துகிறோம். அங்கே onClick={handleClick} என்று எழுதுவோம். அது பார்ப்பதற்கு Inline போலத் தெரிந்தாலும், உண்மையில் பிரேம்வொர்க் அதைத் தரமான முறையில் கையாளும். ஆனால், நேரடி HTML-ல் onclick="..." என்று எழுதுவது உங்கள் கோடின் தரத்தைக் குறைக்கும்.
Better Alternative:
எப்பொழுதும் ஜாவாஸ்கிரிப்ட் file தனியாக வைத்து addEventListener பயன்படுத்துவதே ஒரு புரொபஷனல் டெவலப்பருக்கு அழகு.