JavaScript · Lesson 22 / 32 · தமிழ்

JavaScript Events

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesBrowser previewPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

An event listener connects a user action to code. Register the handler once, keep state separately, and update the visible page when the event occurs.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

JavaScript Events என்னன்னு தெரியுமா?

Events என்பது browser-ல நடக்குற சம்பவங்கள் — user button click பண்றது, mouse move பண்றது, key press பண்றது. JavaScript இந்த events-க்கு react பண்ண வழி கொடுக்குது.

Event Listeners Add பண்றது

JavaScript reference fragmentCODE

const btn = document.querySelector("#myBtn");

// Preferred way
btn.addEventListener("click", (e) => {
  console.log(e.target);      // click ஆன element
  console.log(e.type);        // "click"
  console.log(e.clientX, e.clientY); // mouse position
});

// Listener remove பண்றது
const handler = () => console.log("clicked");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

Common Event Types

Category	Event	எப்போ fire ஆகும்
Mouse	click	Element click ஆகும்போது
Mouse	mouseover / mouseout	Mouse enter/leave ஆகும்போது
Keyboard	keydown / keyup	Key press/release ஆகும்போது
Form	submit	Form submit ஆகும்போது
Form	input / change	Input value மாறும்போது
Window	DOMContentLoaded	HTML parse ஆன பிறகு
Window	resize / scroll	Window resize/scroll ஆகும்போது

Event Delegation

JavaScript reference fragmentCODE

// ஒவ்வொரு item-கும் attach பண்றதுக்கு பதிலா parent-ல attach பண்ணு
const list = document.querySelector("#todo-list");

list.addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    e.target.classList.toggle("done");
  }
});

// Default behaviour தடுக்க
document.querySelector("a").addEventListener("click", (e) => {
  e.preventDefault(); // navigation தடுக்கும்
});

03 / Read & predict

முழுமையான உதாரணம்

This is a complete HTML document. Use the HTML preview editor below, not the Node console. Press Run to refresh the rendered page.

index.html · complete exampleCODE

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>Events practice</title>
<body><button id="complete">Complete a lesson</button><p id="count">Completed: 0</p>
<script>
let completed = 0;
document.querySelector("#complete").addEventListener("click", () => {
  completed += 1;
  document.querySelector("#count").textContent = "Completed: " + completed;
});
</script></body></html>

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Initially: Completed: 0
After two button clicks: Completed: 2

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

For this browser example, interact with the rendered preview after pressing Run.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Add a Reset button that returns the count to 0.

விடை மற்றும் விளக்கம்

தவிர்க்க வேண்டிய தவறு: Pass a function to addEventListener. Writing handler() calls it immediately instead of registering it for a later event.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.