JavaScript-ல் Listeners - "ஒட்டுக்கேட்கும் கருவி"

JavaScript-ல் Listeners என்பது ஒரு "ஒட்டுக்கேட்கும் கருவி" அல்லது ஒரு "காவலாளி" போன்றது. உங்கள் இணையதளத்தில் பயனர் (User) என்ன செய்கிறார் என்பதை கவனித்துக்கொண்டே இருந்து, அவர் ஏதாவது செய்தவுடன் (உதாரணத்திற்கு பட்டனை அழுத்துவது) ஒரு வேலையைச் செய்யும்.

Listeners-ன்னா என்ன? (What is it?)

Listener-ங்கிறது ஒரு "காது குடுத்துக் கேட்கிற காவலாளி" மாதிரி. வெப்சைட்-ல இருக்குற ஒரு பட்டனையோ இல்ல வேற எதையாவதோ "யாராவது கிளிக் பண்றாங்களா?", "யாராவது டைப் பண்றாங்களா?"-ன்னு கவனிச்சுக்கிட்டே இருக்கும்.

Example: ஒரு வீட்ல இருக்குற Calling Bell.
யாராவது வந்து பட்டனை அமுக்குற வரைக்கும் அது அமைதியா இருக்கும். யாராவது அமுக்குன உடனே "டிங் டாங்"-ன்னு சத்தம் போடும். இங்க காலிங் பெல் தான் Listener.

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

ஜாவாஸ்கிரிப்ட்டில் addEventListener என்ற மெத்தட் மூலம் இதைச் செய்யலாம். இதில் 3 விஷயங்கள் முக்கியம்:

• Target: எதை கவனிக்க வேண்டும்? (எ.கா: ஒரு பட்டன்(button))
• Event: என்ன நடந்தால் வேலை செய்ய வேண்டும்? (எ.கா: Click)

Mouse Events (மவுஸ் மூலம் நடப்பவை)

click: ஒரு எலிமெண்ட்டை ஒருமுறை கிளிக் செய்யும் போது.
button.addEventListener("click", () => console.log("Clicked!"));

dblclick: இரண்டு முறை வேகமாக கிளிக் செய்யும் போது (Double Click).
button.addEventListener("dblclick", () => console.log("Double Clicked!"));

mouseenter / mouseleave: மவுஸ் பாயிண்டர் ஒரு எலிமெண்ட்டிற்கு உள்ளே வரும்போதும் அல்லது வெளியே போகும்போதும்.
Example: ஒரு கடைக்குள் நுழையும் போதும், வெளியேறும் போதும் செக்யூரிட்டி கவனிப்பது போல.

2. Keyboard Events (கீபோர்டு மூலம் நடப்பவை)

keydown: கீபோர்டில் ஒரு பட்டனை அமுக்கும் போது (அமுக்கிப் பிடித்துக் கொண்டிருக்கும் வரை வேலை செய்யும்).

keyup: அமுக்கிய பட்டனை ரிலீஸ் செய்யும் போது (விரலை எடுக்கும் போது).

Real-time Example: கேம் விளையாடும்போது விரலை எடுத்தவுடன் கார் நிற்பது போல.

window.addEventListener("keyup", (e) => console.log(e.key));

3. Form Events (தகவல்களை அனுப்பும் போது)

submit: ஒரு ஃபார்மை (Form) சப்மிட் செய்யும் போது. (இது மிக முக்கியமானது).
input: ஒரு டெக்ஸ்ட் பாக்ஸில் ஒவ்வொரு எழுத்தை டைப் செய்யும் போதும் இது வேலை செய்யும்.
Example: நீங்கள் டைப் செய்யச் செய்ய "உங்க பாஸ்வேர்டு ஸ்ட்ராங்கா இருக்கு" என லைவ்-ஆக மெசேஜ் வருவது.

change: டைப் செய்து முடித்துவிட்டு அந்த பாக்ஸை விட்டு வெளியே வரும்போது மட்டும் வேலை செய்யும்.

focus / blur: ஒரு பாக்ஸிற்குள் கிளிக் செய்யும் போது (Focus) மற்றும் வெளியே கிளிக் செய்யும் போது (Blur).

4. Window Events (பிரவுசர் சார்ந்தவை)

scroll: பேஜை மேலேயும் கீழேயும் ஸ்க்ரோல் செய்யும் போது.
நீங்கள் எவ்வளவு தூரம் பேஜை படித்துள்ளீர்கள் (Read Progress bar) என்பதைக் காட்ட உதவும்.

resize: பிரவுசர் விண்டோவின் அளவை மாற்றும் போது (Laptop to Mobile view).

load: இணையதளம் முழுமையாக லோடு ஆகி முடிந்த பிறகு.

5. Touch Events (மொபைல் போன்களுக்கு மட்டும்)

touchstart: திரையைத் தொடும் போது.

touchend: தொட்ட விரலை எடுக்கும் போது.
மொபைலில் இமேஜ் ஸ்லைடர் (Image Slider) நகர்த்தப் பயன்படும்.

• Function: என்ன வேலை செய்ய வேண்டும்?(எ.கா: sayHello)

Example Syntax:

button.addEventListener("click", sayHello);

function sayHello() {
  alert("வணக்கம்! திரைச்சுவடு-க்கு வரவேற்கிறோம்!");
}

ஏன் லிசனர்ஸை நிறுத்தணும்? (How and Why to Stop?):

ஒரு வேலையைச் செய்ய லிசனர் வச்ச மாதிரி, அந்த வேலை முடிஞ்சதும் அதை எடுக்கணும். இல்லன்னா அது பேக்ரவுண்ட்ல ஓடிக்கிட்டே இருந்து உங்க கம்ப்யூட்டரை ஸ்லோ பண்ணிடும் (இதத்தான் Memory Leak-ன்னு சொல்லுவாங்க).

removeEventListener மூலமா நிப்பாட்டலாம்.

Real-time Example:
ஒரு எக்ஸாம் நடக்குது. அப்போ அங்க இருக்குற சூப்பர்வைசர் (Listener) பசங்க காப்பி அடிக்கிறாங்களான்னு கவனிப்பாரு. எக்ஸாம் முடிஞ்சதும் அவர் அங்க இருக்கத் தேவையில்லை, வீட்டுக்கு கிளம்பிடலாம். அவர் அங்கயே இருந்தா அது வேஸ்ட்!

Example Syntax:

function welcome() {
  alert("Welcome to திரைச்சுவடு!");
}

// வேலையை ஆரம்பி (Start)
btn.addEventListener("click", welcome);

// வேலையை நிறுத்து (Stop)
btn.removeEventListener("click", welcome);

Listeners-க்கு பதிலா எதை பயன்படுத்தலாம்? (Alternatives)

1. Inline Event Handlers (பழைய காலத்து முறை)
நேரடியா HTML டேக் உள்ளயே எழுதுறது.
<button onclick="alert('வணக்கம்')">Click</button>
Example: ஒரு ஸ்கூல் யூனிஃபார்ம்லயே "என் பேர் அருண்"-ன்னு எழுதி ஒட்டுறது மாதிரி.
Problem: இது ரொம்ப அழுக்கான முறை (Bad Practice). இதைப் பயன்படுத்தாதீங்க.

2. Property Handlers (கொஞ்சம் பெட்டர்)
ஜாவாஸ்கிரிப்ட்ல ஒரு வேரியபிளுக்கு வேல்யூ குடுக்குற மாதிரி எழுதுறது.
myButton.onclick = sayHello;
Example: ஒரு செக்யூரிட்டி கார்டுகிட்ட "யாராவது வந்தா வணக்கம் சொல்லு"ன்னு நேர்ல சொல்றது.
Problem: ஒரு செக்யூரிட்டிகிட்ட ஒரு வேலையைச் சொல்லிட்டு, அப்புறம் வேற வேலையைச் சொன்னா, அவர் முதல்ல சொன்னதை மறந்துடுவாரு. (ஒரே பட்டன்ல ரெண்டு வேலை செய்ய முடியாது).

3. Event Delegation (ஸ்மார்ட்டான முறை)
ஒவ்வொரு பட்டனுக்கும் தனித்தனி லிசனர் வைக்காம, எல்லாத்துக்கும் சேர்த்து ஒரு Main Box (Parent)-க்கு லிசனர் வைக்கிறது.
Example: ஒரு அப்பார்ட்மெண்ட்ல 100 வீடுகள் இருக்கு. ஒவ்வொரு வீட்டுக்கும் ஒரு செக்யூரிட்டி வைக்காம, மெயின் கேட்ல ஒரு செக்யூரிட்டி வச்சு யார் வராங்கன்னு கவனிக்கிறது.
Benefits: இது மெமரியை மிச்சப்படுத்தும். ரொம்ப வேகமா வேலை செய்யும்.