Theory
एक page जो बस बैठा रहता है
FestConnect अब अच्छा दिखता है, पर कुछ होता नहीं। एक event card पर hover करना इसे highlight नहीं करता। एक email type करना कोई instant feedback नहीं देता। Register दबाने से page reload होता है और सब कुछ खो जाता है।
User को react करने के लिए, JavaScript events सुनती है: वे signals जो browser तब fire करता है जब कोई click करता है, hover करता है, type करता है, या submit करता है। आप एक event को एक handler (एक function) attach करते हैं, और browser इसे सही moment पर call करता है। Events तीन families में साफ़-साफ़ group होते हैं।
Theory
Actions से wired doorbells
Events को अपने page के आस-पास doorbells समझिए। एक तब बजता है जब mouse एक card में enter करता है (mouseover), एक जब एक box में एक key release होती है (keyup), एक जब एक field छोड़ी जाती है (blur), एक जब form भेजा जाता है (submit)। आपका काम है हर उस bell को जो आपको matter करती है एक action से wire करना। जिन bells को आप wire नहीं करते वे बस void में बजती हैं, जो ठीक है।
Theory
तीन families
element.addEventListener('type', handler) से (या एक inline onclick="..." से) एक handler attach कीजिए।
- Mouse:
click,mouseover(enter),mouseout(leave),mousemove,mousedown,mouseup। - Keyboard:
keydown(pressed),keyup(released)। - Form:
focus(field में गया),blur(field छोड़ी),change(value बदली और committed),submit(form भेजा गया)।
submit <form> पर ख़ुद fire होता है, और आमतौर पर page reload रोकने के लिए preventDefault() के साथ pair होता है।
At a glance
हर एक कब fire होता है
| Event | कब fire होता है | Common use |
|---|---|---|
| click | element click होता है | buttons |
| mouseover / mouseout | pointer enter / leave करता है | hover highlight |
| keyup | एक key release होती है | live search |
| blur | एक field focus खोती है | उस field को validate करना |
| submit | form भेजा जाता है | validate + reload रोकना |
Practical
FestConnect react करता है
<div id="card">Robotics</div>
<input id="email" type="email">
<form id="reg"> ... <button>Register</button> </form>
<script>
const card = document.getElementById("card");
// hover: highlight on enter, clear on leave
card.addEventListener("mouseover", () => card.style.background = "gold");
card.addEventListener("mouseout", () => card.style.background = "");
// validate a field the moment the user leaves it
const email = document.getElementById("email");
email.addEventListener("blur", () => {
if (email.value.indexOf("@") === -1) console.log("Email needs an @");
});
// submit fires on the FORM; stop the reload so JS can check first
document.getElementById("reg").addEventListener("submit", (e) => {
e.preventDefault();
console.log("validating before sending...");
});
</script>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
कौन सा event एक field validate करता है?
आप एक user को बताना चाहते हैं उनकी email में @ missing है जैसे ही वे उस field को ख़त्म करके आगे बढ़ें, हर keystroke पर नहीं। कौन सा form event fit होता है, और keyup क्यों नहीं?
Show the answer
blur इस्तेमाल कीजिए: यह एक बार fire होता है, जब field focus खोता है (user tab करता है या दूर click करता है), जो exactly 'उन्होंने यह field ख़त्म कर दी' है। keyup हर key release पर fire होता है, तो यह mid-typing nag करेगा ('a@' incomplete है पर flag हो जाता है)। blur natural pause पर check करता है। Final gate के लिए आप submit पर भी सब कुछ फिर check करते हैं। Live features जैसे search-as-you-type के लिए keyup बेहतर है।
Quiz
Register दबाने से page reload होता है और आपकी JavaScript के check करने से पहले form मिट जाता है। submit handler के अंदर standard fix क्या है?
- Browser की default form submission रोकने के लिए e.preventDefault() call कीजिए
- submit के बजाय mouseover इस्तेमाल कीजिए
- <form> tag पूरी तरह हटा दीजिए
- और console.log statements जोड़िए
Show the answer
Browser की default form submission रोकने के लिए e.preventDefault() call कीजिए
एक form का default action है भेजना और page reload करना; submit handler में e.preventDefault() call करना इसे रोकता है, आपकी JavaScript को पहले validate करने देते हुए और सब ठीक होने पर ही submit करते हुए (A)। mouseover (B) submitting से unrelated है। Form हटाना (C) grouping और submit event ख़ुद खो देता है। Logging (D) reload नहीं रोकता। preventDefault client-side validation की key है, जिसे आप Unit 5 में पूरी तरह बनाएँगे।
Watch out
Event traps
1. 'mouseremove' एक असली event नहीं है। Move event है mousemove; एक element छोड़ना mouseout (या mouseleave) है। एक typo memorise मत कीजिए।
2. submit form पर है, button पर नहीं। <form> पर listen कीजिए, और वहीं preventDefault() call कीजिए।
3. keydown बनाम keyup: keydown key नीचे जाते ही fire होता है (hold करने पर repeat होता है), keyup release पर एक बार। Final typed value पढ़ने के लिए, keyup आमतौर पर safer है।
Theory
Events functions को call करते हैं, जो अगले हैं
यहाँ हर handler एक function है जिसे browser आपके लिए call करता है। Unit 5 functions को formalise करता है (parameters, return, calling) और फिर असली FestConnect register() बनाता है जिसे एक submit event trigger करता है, जो पूरा validation चलाता है, और या तो redirect करता है या एक error दिखाता है। Events trigger हैं; functions action हैं; साथ में वे interactivity हैं।
Summary
Key takeaways
- एक event एक user action है जिसे browser fire करता है; addEventListener('type', fn) या inline onclick से एक handler attach कीजिए।
- Mouse: click, mouseover (enter), mouseout (leave), mousemove, mouseup।
- Keyboard: keydown (pressed), keyup (released)।
- Form: focus (enter), blur (leave, एक field validate करने के लिए अच्छा), change (committed), submit (form भेजा गया)।
- submit <form> पर fire होता है; reload रोकने और पहले validate करने के लिए e.preventDefault() call कीजिए। 'mousemove', 'mouseremove' नहीं।
- Memory hook: actions से wired doorbells।