JavaScript Events: click, input, submit & Event Bubbling (పూర్తి మార్గదర్శి)
గత పాఠంలో మనం HTML ఎలిమెంట్లను ఎంచుకోవడం మరియు వాటి రంగులు, టెక్స్ట్‌లను మార్చడం నేర్చుకున్నాం. కానీ వెబ్‌సైట్‌లు కేవలం స్టాటిక్‌గా ఉండవు; యూజర్లు బటన్ క్లిక్ చేసినప్పుడు, కీబోర్డ్ టైప్ చేసినప్పుడు, మౌస్ కదిలించినప్పుడు పేజీ తక్షణమే స్పందించాలి (Interactive).
కాలింగ్ బెల్ & సెక్యూరిటీ గార్డ్ అనాలజీ (Doorbell & Guard Analogy):
ఒక ఇంటి ప్రధాన ద్వారం వద్ద కాలింగ్ బెల్ ఉంది (HTML Button). ఎవరైనా వచ్చి ఆ బెల్ మోగించడాన్ని Event (ఘటన) అంటాం.
ఆ బెల్ ఎప్పుడు మోగుతుందో కనిపెట్టడానికి తలుపు పక్కన ఒక సెక్యూరిటీ గార్డును కాపలా ఉంచడం addEventListener.
బెల్ మోగగానే గార్డు తలుపు తీయడం లేదా ఐడీ కార్డు అడగడం వంటి ప్రతిస్పందనను Callback Function (Event Handler) అంటాం!
ఈ పాఠంలో మనం అత్యంత ప్రాచుర్యం పొందిన click, input, submit ఈవెంట్స్ తో పాటు, ఫారమ్ పేజీని రీలోడ్ చేయకుండా ఆపే e.preventDefault() మరియు ఇంటర్వ్యూలలో తప్పనిసరిగా అడిగే Event Bubbling & Event Delegation కాన్సెప్టులను నేర్చుకుందాం.
సాంప్రదాయ ప్రోగ్రామింగ్‌లో కోడ్ మొదటి లైన్ నుండి చివరి లైన్ వరకు వరుసగా ఒకేసారి ఎగ్జిక్యూట్ అయి ముగుస్తుంది. కానీ బ్రౌజర్‌లో అలా జరగదు. యూజర్ ఎప్పుడు ఏ బటన్ నొక్కుతాడో ముందే ఊహించలేం.
⚡ Event-driven సిద్ధాంతం:
బ్రౌజర్ నిరంతరం యూజర్ చర్యలను (User Actions) గమనిస్తూ వేచి ఉంటుంది. యూజర్ మౌస్ క్లిక్ చేసినప్పుడు లేదా ఫారమ్ పంపినప్పుడు, బ్రౌజర్ ఆ సంబంధిత ఈవెంట్‌ను ప్రేరేపిస్తుంది (fires an event). ఆ ఈవెంట్ కోసం ముందే రిజిస్టర్ చేసుకున్న జావాస్క్రిప్ట్ ఫంక్షన్ నిద్రలేచి తన పని పూర్తి చేస్తుంది.
ఒక బటన్‌కు ఈవెంట్‌ను లింక్ చేయడానికి HTML లో <button onclick="doWork()"> అని రాయడం చాలా పాత పద్ధతి. ఆధునిక ప్రొఫెషనల్ వెబ్ డెవలప్‌మెంట్‌లో దీనిని ఒక Bad Practice గా పరిగణిస్తారు:
| ఫీచర్ | పాత పద్ధతి: Inline onclick="" |
ఆధునిక ప్రామాణికం: addEventListener() |
|---|---|---|
| కోడ్ వేర్పాటు (Separation) | HTML మరియు JS కలిసిపోయి గందరగోళంగా మారుతాయి. | ✅ శుభ్రమైనది: HTML స్ట్రక్చర్ వేరు, JS లాజిక్ వేరు. |
| బహుళ ఫంక్షన్లు (Multiple Listeners) | ఒక ఈవెంట్‌కు ఒకే ఫంక్షన్ పెట్టగలం (రెండోది రాస్తే మొదటిది ఓవర్‌రైట్ అవుతుంది). | ✅ సాధ్యం: ఒకే బటన్ క్లిక్‌పై 2 లేదా 3 వేర్వేరు ఫంక్షన్లను సులభంగా రన్ చేయవచ్చు. |
| తొలగించడం (Removal) | లిజనర్‌ను సులభంగా తొలగించలేము. | ✅ సులభం: removeEventListener() ద్వారా అవసరం లేనప్పుడు తీసివేయవచ్చు. |
📌 addEventListener సింటాక్స్ నియమం:
element.addEventListener(eventType, callbackFunction);
గమనిక: ఈవెంట్ పేరు ముందు 'on' పెట్టకూడదు! అంటే 'onclick' అని కాకుండా కేవలం 'click' అని మాత్రమే రాయాలి.
వెబ్ డెవలపర్లు నిత్యం ఉపయోగించే అత్యంత ముఖ్యమైన ఈవెంట్లు:
| ఈవెంట్ పేరు | వర్గం | ఎప్పుడు ట్రిగ్గర్ అవుతుంది? | రియల్ వరల్డ్ ఉదాహరణ |
|---|---|---|---|
click |
Mouse | ఎలిమెంట్‌పై మౌస్‌తో లేదా మొబైల్‌లో ట్యాప్ చేసినప్పుడు. | బటన్ నొక్కి కార్ట్‌లోకి ఐటమ్ చేర్చడం. |
input |
Form | టెక్స్ట్‌బాక్స్‌లో ప్రతి ఒక్క అక్షరం టైప్ చేసినా, డిలీట్ చేసినా తక్షణమే. | లైవ్ సెర్చ్ బాక్స్, పాస్‌వర్డ్ స్ట్రెంత్ మీటర్. |
change |
Form | విలువ మారి, ఆ ఇన్‌పుట్ నుండి ఫోకస్ బయటకు వెళ్లినప్పుడు (లేదా డ్రాప్‌డౌన్ సెలెక్ట్ చేసినప్పుడు). | దేశం/రాష్ట్రం డ్రాప్‌డౌన్ మార్పు, ఫైల్ అప్‌లోడ్. |
submit |
Form | యూజర్ <form> లోని సబ్మిట్ బటన్ నొక్కినప్పుడు లేదా ఎంటర్‌పై క్లిక్ చేసినప్పుడు. |
లాగిన్ ఫారమ్, రిజిస్ట్రేషన్. |
keydown |
Keyboard | కీబోర్డ్‌లో ఏదైనా బటన్ నొక్కి పట్టినప్పుడు. | గేమ్స్ (Arrow keys తో క్యారెక్టర్ కదలడం), షార్ట్‌కట్‌లు. |
focus / blur |
Form | ఇన్‌పుట్ బాక్స్ లోపలికి కర్సర్ వచ్చినప్పుడు (focus) / బయటకు వెళ్ళినప్పుడు (blur). | ఇన్‌పుట్ బాక్స్ బోర్డర్ బ్లూ రంగులోకి మారడం, ఫీల్డ్ ఖాళీగా ఉంటే ఎర్రర్ చూపడం. |
ఒక ఈవెంట్ జరిగినప్పుడు, జావాస్క్రిప్ట్ ఇంజిన్ దానంతట అదే ఆ ఈవెంట్ గురించిన సమగ్ర సమాచారాన్ని ఒక ఆబ్జెక్ట్ రూపంలో మన ఫంక్షన్‌కు పంపుతుంది. దీనిని సాధారణంగా e లేదా event అంటాం.
📦 కొరియర్ డెలివరీ రసీదు అనాలజీ (Event Object Analogy):
కొరియర్ బాయ్ పార్సెల్ డెలివరీ చేసినప్పుడు రసీదుపై పార్సెల్ పంపిన వ్యక్తి ఎవరు, ఏ సమయానికి వచ్చింది, బరువు ఎంత వంటి వివరాలు ఉంటాయి. సరిగ్గా అలాగే e ఆబ్జెక్ట్ లో:
• e.target ➔ ఈవెంట్‌ను ట్రిగ్గర్ చేసిన అసలైన HTML ఎలిమెంట్ (ఉదా: యూజర్ క్లిక్ చేసిన నిర్దిష్ట బటన్ లేదా ఇన్‌పుట్ బాక్స్).
• e.target.value ➔ ఇన్‌పుట్ బాక్స్‌లో యూజర్ టైప్ చేసిన ప్రస్తుత అక్షరాలు!
• e.key ➔ కీబోర్డ్‌లో నొక్కిన కీ పేరు (ఉదా: "Enter", "Escape").
• e.type ➔ ఈవెంట్ రకం (ఉదా: "click").
🛑 e.preventDefault() ఎందుకు ప్రాణాధారమైనది?
HTML ఫారమ్‌ల సహజ లక్షణం (Default Behavior) ఏమిటంటే — యూజర్ సబ్మిట్ బటన్ నొక్కగానే మొత్తం బ్రౌజర్ పేజీ రీలోడ్ అయి సర్వర్‌కు వెళ్లడానికి ప్రయత్నిస్తుంది.
కానీ ఆధునిక వెబ్ అప్లికేషన్లలో (Single Page Apps / React / Vanilla JS) పేజీ రీలోడ్ అయితే యూజర్ టైప్ చేసిన డేటా, స్క్రీన్ స్టేట్ అంతా పోతుంది!
కాబట్టి ఫారమ్ సబ్మిట్ హ్యాండ్లర్ లో మొదటి లైన్‌గా e.preventDefault(); అని రాస్తే, బ్రౌజర్ పేజీ రీలోడ్ కాకుండా ఆగిపోయి, జావాస్క్రిప్ట్ ద్వారానే డేటాను వెరిఫై చేసి సర్వర్‌కు పంపడానికి వీలు కలుగుతుంది!
జావాస్క్రిప్ట్ ఈవెంట్లలో అత్యంత ఆసక్తికరమైన మరియు ఇంటర్వ్యూలలో తరచుగా అడిగే సిద్ధాంతం Event Bubbling:
🫧 నీటి బుడగ అనాలజీ (Event Bubbling Analogy):
ఒక గాజు గ్లాసులో సోడా పోసినప్పుడు గాలి బుడగలు అడుగు నుండి పైకి తేలుతాయి కదా? సరిగ్గా అలాగే:
మీరు ఒక <button> ని క్లిక్ చేసినప్పుడు, ఆ క్లిక్ ఈవెంట్ కేవలం ఆ బటన్‌తోనే ఆగిపోదు! అది బటన్ నుండి దాని పేరెంట్ <div> కి, అక్కడి నుండి <body> కి, చివరికి మొత్తం document వరకు పైపైకి తేలుతూ వెళ్తుంది. దీనినే Event Bubbling అంటారు.
బుడగ పైకి వెళ్లకుండా అక్కడితోనే తుంచేయాలంటే: e.stopPropagation(); వాడాలి.
🎯 Event Delegation అంటే ఏమిటి? ఎందుకు వాడాలి?
మీ వద్ద ఒక ఈ-కామర్స్ పేజీలో 100 ప్రొడక్టుల లిస్ట్ ఉందనుకోండి. ప్రతి ప్రొడక్ట్ పక్కన "Delete" లేదా "Add to Cart" బటన్ ఉంది.
సాధారణ పద్ధతి (Bad Practice): 100 బటన్లను లూప్ చేసి, 100 వేర్వేరు addEventListener లను మెమరీలో పెట్టడం. దీనివల్ల బ్రౌజర్ నెమ్మదిస్తుంది. పైగా తర్వాత కొత్తగా 101వ ఐటమ్ చేరితే దానికి ఈవెంట్ పని చేయదు!
Event Delegation (Smart Practice): 100 బటన్లకు బదులుగా, వాటన్నింటికీ తండ్రి అయిన మెయిన్ <ul> పేరెంట్‌కి ఒకే ఒక్క Event Listener పెడతాం! యూజర్ ఏ బటన్ నొక్కినా బుబ్లింగ్ ద్వారా ఈవెంట్ పేరెంట్‌కు చేరుతుంది. అక్కడ if (e.target.tagName === 'BUTTON') అని తనిఖీ చేసి పని కానిచ్చేస్తాం! ఇది మెమరీని ఆదా చేస్తుంది మరియు కొత్తగా చేరిన ఐటమ్స్‌పై కూడా స్వయంచాలకంగా పనిచేస్తుంది.
Click ఈవెంట్ ద్వారా కౌంటర్ పెంచడం, Real-time input ద్వారా టెక్స్ట్ మిర్రరింగ్, submit లో preventDefault() వాడటం మరియు Event Delegation ద్వారా లిస్ట్ ఐటమ్ డిలీట్ చేసే ఏకైక సమగ్ర కోడ్ ఉదాహరణ ఇది. బ్రౌజర్ లో ఇది ఎలా పనిచేస్తుందో గమనించండి:
/*
HTML నిర్మాణం:
<button id="like-btn">Likes: <span id="count">0</span></button>
<input type="text" id="username-input" placeholder="పేరు టైప్ చేయండి..." />
<p>లైవ్ ప్రివ్యూ: <span id="preview"></span></p>
<form id="login-form">
<input type="email" id="email" required />
<button type="submit">లాగిన్</button>
</form>
<ul id="tasks-list">
<li>టాస్క్ 1 <button class="del-btn">❌</button></li>
<li>టాస్క్ 2 <button class="del-btn">❌</button></li>
</ul>
*/
// 1. Click Event (లైక్ కౌంటర్ లాజిక్)
let likes = 0;
const likeBtn = document.querySelector("#like-btn");
const countSpan = document.querySelector("#count");
likeBtn.addEventListener("click", () => {
likes++;
countSpan.textContent = likes;
});
// 2. Input Event (రియల్-టైమ్ క్యారెక్టర్ మిర్రరింగ్)
const userInput = document.querySelector("#username-input");
const previewSpan = document.querySelector("#preview");
userInput.addEventListener("input", (e) => {
// e.target.value ద్వారా టైప్ చేసిన అక్షరాలు లభిస్తాయి
previewSpan.textContent = e.target.value.trim() || "ఏమీ టైప్ చేయలేదు";
});
// 3. Form Submit Event & e.preventDefault()
const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit", (e) => {
// పేజీ రీలోడ్ అవ్వకుండా ఆపుతుంది!
e.preventDefault();
const emailVal = document.querySelector("#email").value;
console.log("ఫారమ్ డేటా భద్రంగా సేకరించబడింది:", emailVal);
alert(`లాగిన్ సక్సెస్: ${emailVal}`);
});
// 4. Event Delegation (ఒకే ఒక్క లిజనర్‌తో అన్ని డిలీట్ బటన్లను హ్యాండిల్ చేయడం)
const tasksList = document.querySelector("#tasks-list");
tasksList.addEventListener("click", (e) => {
// క్లిక్ చేయబడిన ఎలిమెంట్ డిలీట్ బటన్ అవునా కాదా అని తనిఖీ
if (e.target.classList.contains("del-btn")) {
const parentLi = e.target.parentElement;
parentLi.remove(); // లిస్ట్ ఐటమ్‌ను సురక్షితంగా తొలగిస్తుంది
console.log("ఐటమ్ డిలీట్ చేయబడింది!");
}
});1. likeBtn Click ➔ Likes కౌంట్ 1 గా అప్‌డేట్ అయింది.
2. userInput లో 'రమేష్' టైప్ చేయగానే ➔ previewSpan తక్షణమే 'రమేష్' గా మారింది.
3. Form Submit ➔ పేజీ రీలోడ్ కాలేదు! కన్సోల్ లో డేటా ప్రింట్ అయింది.
4. del-btn క్లిక్ ➔ బుబ్లింగ్ ద్వారా పేరెంట్ ul పట్టుకుని ఆ సంబంధిత li ని తొలగించింది.
userInput.addEventListener("input")ప్రతి అక్షరానికి రియాక్టివ్‌గా స్పందిస్తుంది.e.preventDefault()ఉండటం వల్లే ఫారమ్ సబ్మిట్ అయినా పేజీ రీఫ్రెష్ అవ్వకుండా యూజర్ స్క్రీన్ పైనే స్థిరంగా ఉన్నాడు.tasksListపై ఉన్న సింగిల్ లిజనర్ ద్వారా ఎన్ని బటన్లు ఉన్నా మెమరీ వేస్ట్ కాకుండా పనులు పూర్తవుతాయి.
ఈవెంట్ హ్యాండ్లర్లతో పనిచేసేటప్పుడు కొత్త విద్యార్థులు తరచుగా చేసే పొరపాట్లు:
btn.addEventListener("click", handleClick()); // ❌ తప్పు!
బ్రాకెట్లు () పెడితే పేజీ లోడ్ అవ్వగానే ఫంక్షన్ వెంటనే రన్ అయిపోతుంది! క్లిక్ చేసినప్పుడు రన్ అవ్వాలంటే కేవలం ఫంక్షన్ పేరు మాత్రమే ఇవ్వాలి:
btn.addEventListener("click", handleClick); // ✅ సరైనది
మీరు ఎంత మంచి కోడ్ రాసినా, e.preventDefault() రాయకపోతే పేజీ రెప్పపాటులో రీలోడ్ అయిపోయి మీ వేరియబుల్స్ మరియు కన్సోల్ లాగ్స్ అన్నీ కొట్టుకుపోతాయి.
టెక్స్ట్‌బాక్స్‌లో టైప్ చేస్తుండగానే లైవ్ ప్రివ్యూ కావాలంటే input వాడాలి. change వాడితే యూజర్ బాక్స్ బయట క్లిక్ చేసిన తర్వాత మాత్రమే ఫలితం వస్తుంది.
btn.addEventListener("onclick", fn); // ❌ పని చేయదు!
ఎల్లప్పుడూ "click", "submit", "input" అని మాత్రమే రాయాలి.
సాధారణ ఫంక్షన్‌లో this అనేది క్లిక్ చేయబడిన ఎలిమెంట్‌ను సూచిస్తుంది. కానీ Arrow Function () => {} లో this గ్లోబల్ విండోను సూచిస్తుంది. కాబట్టి ఎల్లప్పుడూ సురక్షితంగా e.target ని వాడటమే బెస్ట్ ప్రాక్టీస్!
ట్విట్టర్ (X) లేదా ఫీడ్‌బ్యాక్ ఫారమ్‌లలో మనం టైప్ చేస్తున్న కొద్దీ అక్షరాల పరిమితిని (Character Limit) గమనిస్తూ, పరిమితి దాటితే ఎరుపు రంగులోకి మారడం మరియు సబ్మిట్ చేసినప్పుడు పోస్ట్‌ను లైవ్ ఫీడ్‌లో ప్రదర్శించే పూర్తి రియల్-వరల్డ్ ఈవెంట్ లాజిక్ ఇది:
ఈ కోడ్‌ను మన ఆన్‌లైన్ కంపైలర్ లో రన్ చేసి స్వయంగా పరిశీలించండి:
// క్యారెక్టర్ కౌంటర్ మరియు పోస్ట్ పబ్లిషర్ లాజిక్
function createPostEngine(maxChars = 140) {
let publishedPosts = [];
// 1. అక్షరాలను రియల్-టైమ్‌లో పర్యవేక్షించే ఫంక్షన్ (input event simulation)
function handleTyping(currentText) {
const charsUsed = currentText.length;
const charsLeft = maxChars - charsUsed;
const isExceeded = charsLeft < 0;
return {
charsUsed,
charsLeft,
statusClass: isExceeded ? "text-danger" : "text-normal",
canPublish: charsUsed > 0 && !isExceeded
};
}
// 2. పోస్ట్ సబ్మిట్ చేసే ఫంక్షన్ (submit event simulation)
function handlePublish(postText, authorName) {
const typingStatus = handleTyping(postText);
if (!typingStatus.canPublish) {
return { success: false, error: "పోస్ట్ ఖాళీగా ఉంది లేదా 140 అక్షరాల పరిమితి దాటింది!" };
}
const newPost = {
id: Date.now(),
author: authorName,
content: postText.trim(),
likes: 0,
timestamp: new Date().toLocaleTimeString()
};
publishedPosts.unshift(newPost); // ఫీడ్ లో పైకి చేరుస్తుంది
return { success: true, post: newPost, totalPosts: publishedPosts.length };
}
// 3. లైక్ బటన్ క్లిక్ చేయడం (event delegation simulation)
function handleLike(postId) {
const post = publishedPosts.find(p => p.id === postId);
if (post) {
post.likes++;
return { success: true, currentLikes: post.likes };
}
return { success: false, error: "పోస్ట్ దొరకలేదు" };
}
return { handleTyping, handlePublish, handleLike };
}
// ఇంజిన్ ని ప్రారంభించి టెస్ట్ చేయడం
const engine = createPostEngine(140);
// టెస్ట్ 1: టైపింగ్ స్థితి పరిశీలన
const typeCheck = engine.handleTyping("జావాస్క్రిప్ట్ ఈవెంట్స్ చాలా అద్భుతంగా ఉన్నాయి!");
console.log("వాడిన అక్షరాలు:", typeCheck.charsUsed);
console.log("మిగిలిన అక్షరాలు:", typeCheck.charsLeft);
// టెస్ట్ 2: పోస్ట్ పబ్లిష్ చేయడం
const publishResult = engine.handlePublish(
"జావాస్క్రిప్ట్ ఈవెంట్స్ చాలా అద్భుతంగా ఉన్నాయి!",
"మహేష్ బాబు"
);
console.log("పబ్లిష్ ఫలితం:", publishResult.success ? "విజయవంతమైంది ✅" : "విఫలమైంది ❌");
console.log("పోస్ట్ ఐడీ:", publishResult.post.id);
// టెస్ట్ 3: ఈవెంట్ డెలిగేషన్ లైక్ క్లిక్
const likeResult = engine.handleLike(publishResult.post.id);
console.log("పోస్ట్ లైక్స్ సంఖ్య:", likeResult.currentLikes);వాడిన అక్షరాలు: 44
మిగిలిన అక్షరాలు: 96
పబ్లిష్ ఫలితం: విజయవంతమైంది ✅
పోస్ట్ ఐడీ: 1761304567890
పోస్ట్ లైక్స్ సంఖ్య: 1
ఈ క్రింది ప్రశ్నలకు స్వయంగా సమాధానం ఆలోచించి, ఆపై డ్రాప్‌డౌన్ తెరిచి పరిశీలించండి:
element.addEventListener("click", myFunc)మరియుelement.onclick = myFuncమధ్య తేడా ఏమిటి?- ఫారమ్ సబ్మిట్ చేసినప్పుడు
e.preventDefault()ఎందుకు ఉపయోగించాలి? - యూజర్ టైప్ చేసిన క్యారెక్టర్లను రియల్-టైమ్‌లో పట్టుకోవడానికి
changeకంటేinputఎందుకు సరైనది? - Event Bubbling అంటే ఏమిటి? దానిని ఆపడానికి ఏ మెథడ్ వాడతారు?
- ఒక టేబుల్‌లో 50 వరుసలు ఉన్నప్పుడు Event Delegation ఎలా ప్రయోజనకరంగా ఉంటుంది?
- కీబోర్డ్‌లో యూజర్ 'Enter' కీ నొక్కాడో లేదో ఎలా తనిఖీ చేయాలి?
👉 సమాధానాలు మరియు వివరణలు చూడండి (Click to Expand)
1. సమాధానం: addEventListener ద్వారా ఒకే ఎలిమెంట్‌పై బహుళ లిజనర్లను పెట్టవచ్చు మరియు ఎప్పుడైనా తొలగించవచ్చు. onclick ఒకే ఫంక్షన్‌ని మాత్రమే అనుమతిస్తుంది (రెండోది రాస్తే మొదటిది ఓవర్‌రైట్ అవుతుంది).
2. సమాధానం: ఫారమ్ సబ్మిట్ అయినప్పుడు బ్రౌజర్ పేజీ రీలోడ్ అయ్యే సహజ డిఫాల్ట్ ప్రవర్తనను e.preventDefault() అడ్డుకుంటుంది, తద్వారా జావాస్క్రిప్ట్ ద్వారా డేటాను నిలుపుకోవచ్చు.
3. సమాధానం: input ప్రతి అక్షరం టైప్ చేసిన మిల్లీసెకనులోనే వెంటనే ట్రిగ్గర్ అవుతుంది. కానీ change యూజర్ టైపింగ్ ముగించి బాక్స్ బయట క్లిక్ చేసినప్పుడు మాత్రమే ట్రిగ్గర్ అవుతుంది.
4. సమాధానం: ఒక చైల్డ్ ఎలిమెంట్‌పై జరిగిన ఈవెంట్ దాని పేరెంట్స్ మరియు డాక్యుమెంట్ వరకు పైకి వ్యాపించడాన్ని Event Bubbling అంటారు. దీనిని ఆపడానికి e.stopPropagation() వాడతారు.
5. సమాధానం: 50 వరుసలకు 50 వేర్వేరు లిజనర్లు పెట్టి మెమరీ వేస్ట్ చేయకుండా, వాటి పేరెంట్ టేబుల్‌పై ఒకే ఒక్క లిజనర్ పెట్టి e.target ద్వారా ఏ వరుస క్లిక్ అయిందో గుర్తించవచ్చు (Event Delegation).
6. సమాధానం: keydown ఈవెంట్ లో if (e.key === "Enter") అని తనిఖీ చేయాలి.
📌 సారాంశం (Quick Summary):
- Events: వెబ్ పేజీలో యూజర్ చర్యలు (క్లిక్, టైపింగ్, స్క్రోలింగ్) జరిగే సందర్భాలు.
- సింటాక్స్: ఎల్లప్పుడూ
element.addEventListener("eventName", callback)వాడాలి (బ్రాకెట్లు పెట్టకూడదు). - ఈవెంట్ ఆబ్జెక్ట్ (e): క్లిక్ చేయబడిన ఎలిమెంట్ కోసం
e.target, ఇన్‌పుట్ విలువ కోసంe.target.valueవాడాలి. - ఫారమ్ రక్షణ: పేజీ రీలోడ్ కాకుండా ఆపడానికి
e.preventDefault()తప్పనిసరి. - Event Bubbling & Delegation: ఈవెంట్ కింద నుండి పైకి తేలుతుంది. పేరెంట్‌పై ఒకే లిజనర్ పెట్టి మెమరీ ఆదా చేయడమే Event Delegation.
👉 తర్వాతి పాఠం: Form Validation (ఫారమ్ ధృవీకరణ) →
ఇప్పుడు మనం ఈవెంట్లను మరియు ఫారమ్ సబ్మిట్‌లను హ్యాండిల్ చేయడం నేర్చుకున్నాం. కానీ యూజర్లు తప్పుడు ఈమెయిళ్లు, ఖాళీ పాస్‌వర్డ్‌లు, లేదా తప్పు ఫోన్ నంబర్లు ఇస్తే ఎలా అడ్డుకోవాలి?
తర్వాతి అధ్యాయంలో అత్యంత ముఖ్యమైన Client-side Form Validation & Regex Rules గురించి వివరంగా నేర్చుకుందాం!