Property Event Handlers

Property Handlers (அல்லது DOM Property Events) என்பது ஜாவாஸ்கிரிப்ட் மூலம் ஒரு HTML எலிமெண்ட்டின் ஈவென்ட் ப்ராபர்ட்டிக்கு நேரடியாக ஒரு ஃபங்க்ஷனை அசைன் (Assign) செய்யும் முறையாகும்.

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

HTML-ல் கோடு எழுதாமல், ஜாவாஸ்கிரிப்ட் கோப்பில் ஒரு எலிமெண்ட்டைத் தேர்ந்தெடுத்து (Access பண்ணி), அதன் ஈவென்ட் ப்ராபர்ட்டிக்கு (உதாரணமாக .onclick) ஒரு ஃபங்க்ஷனை செட் செய்வதுதான் Property Handler.

Example: ஒரு செக்யூரிட்டி கார்டுகிட்ட (Element), "யாராவது வந்தா (Event), வணக்கம் சொல்லு (Function)" அப்படின்னு நேர்ல போய் ஒரு ஆர்டர் போடுற மாதிரி.

2. Why & Where? (ஏன் மற்றும் எங்கே பயன்படுத்துவது?):
Why: Inline-ஐ விட இது சுத்தமானது. HTML தனியாகவும், Logic தனியாகவும் இருக்கும் (Separation of Concerns).
Where: ஒரு எலிமெண்ட்டிற்கு ஒரே ஒரு வேலை மட்டும் செய்ய வேண்டும் என்றால் இது மிகவும் எளிது. சிறிய மற்றும் நடுத்தர அளவு புராஜெக்ட்களில் இதைப் பார்க்கலாம்.

3. How to use? (எப்படி?):
// முதல்ல எலிமெண்ட்டை பிடிங்க
const myButton = document.getElementById("thiraiBtn");

// அப்புறம் ப்ராபர்ட்டி செட் பண்ணுங்க
myButton.onclick = function() {
console.log("திரைச்சுவடு: ப்ராபர்ட்டி ஹேண்ட்லர் வேலை செய்கிறது!");
};

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

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

• Cleaner Code: HTML-ல் கோடிங் இருக்காது, பார்ப்பதற்கு சுத்தமாக இருக்கும்.
• Easy to Learn: பிகினர்களுக்குப் புரிந்துகொள்வது மிக எளிது.
• Better Performance: addEventListener-ஐ விடச் சற்று வேகமாக இது அசைன் ஆகும்.

தீமைகள் (Cons):

• One Task Only: ஒரு ஈவென்ட்டிற்கு ஒரு ஃபங்க்ஷன் மட்டுமே வைக்க முடியும். இரண்டாவது முறை எழுதினால் முதல் முறை எழுதியது அழிந்துவிடும் (Overwriting).

myButton.onclick = task1;
myButton.onclick = task2; // இது Task 1-ஐ அழித்துவிடும்! Task 2 மட்டுமே நடக்கும்.


• Global Scope: ஃபங்க்ஷன்கள் குளோபலாக இருந்தால் குழப்பம் வரலாம்.
• Removal: இதைப் பயன்படுத்தும்போது ஈவென்ட்களை நீக்குவது (Remove) சில நேரம் சிக்கலாகலாம்.

5. என்னென்ன ஈவென்ட்கள் இதில் வரும்? (Events List):

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