Theory
એવું પાનું જે ફક્ત બેસી રહે છે
FestConnect હવે સરસ દેખાય છે, પણ કશું થતું નથી. Event ના card પર hover કરવાથી એ ઉજાગર થતું નથી. Email લખવાથી કોઈ તરતનો પ્રતિભાવ મળતો નથી. Register દબાવવાથી પાનું ફરી load થાય છે અને બધું ખોવાઈ જાય છે.
વાપરનારને પ્રતિભાવ આપવા JavaScript events સાંભળે છે: એવા સંકેત જે કોઈ click કરે, hover કરે, લખે, કે submit કરે ત્યારે browser છોડે છે. તમે event સાથે એક handler (function) જોડો છો, અને browser યોગ્ય ક્ષણે એને બોલાવે છે. Events સુઘડ રીતે ત્રણ કુટુંબમાં વહેંચાય છે.
Theory
ક્રિયાઓ સાથે જોડાયેલી ઘંટડીઓ
Events ને તમારા પાનાની આસપાસની ઘંટડીઓ તરીકે વિચારો. Card પર mouse આવે ત્યારે એક વાગે છે (mouseover), ખાનામાં કોઈ કળ છૂટે ત્યારે એક (keyup), ખાનું છોડાય ત્યારે એક (blur), form મોકલાય ત્યારે એક (submit). તમારું કામ છે તમને જેની પડી છે એ દરેક ઘંટડીને ક્રિયા સાથે જોડવી. તમે ન જોડો એ ઘંટડીઓ ફક્ત શૂન્યમાં વાગે છે, જે વાંધાજનક નથી.
Theory
ત્રણ કુટુંબ
Handler ને element.addEventListener('type', handler) થી જોડો (કે inline onclick="..." થી).
- Mouse:
click,mouseover(અંદર આવવું),mouseout(બહાર જવું),mousemove,mousedown,mouseup. - Keyboard:
keydown(દબાયું),keyup(છૂટ્યું). - Form:
focus(ખાનામાં દાખલ),blur(ખાનું છોડ્યું),change(મૂલ્ય બદલાયું અને પાકું થયું),submit(form મોકલાયું).
submit એ <form> પર જ છૂટે છે, અને પાનું ફરી load થતું અટકાવવા સામાન્ય રીતે એની સાથે preventDefault() જોડાય છે.
At a glance
દરેક ક્યારે છૂટે છે
| Event | ક્યારે છૂટે છે | સામાન્ય ઉપયોગ |
|---|---|---|
| click | element પર click થાય | બટન |
| mouseover / mouseout | ચીંધનારું અંદર આવે / બહાર જાય | Hover પર ઉજાગર |
| keyup | કળ છૂટે | જીવતી શોધ |
| blur | ખાનું focus ગુમાવે | એ ખાનું validate કરવું |
| submit | form મોકલાય | Validate વત્તા ફરી load અટકાવવું |
Practical
FestConnect પ્રતિભાવ આપે છે
<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 ખાનું validate કરે છે?
તમને વાપરનારને એના email માં @ ખૂટે છે એ ત્યારે કહેવું છે જ્યારે એ એ ખાનું પૂરું કરીને આગળ વધે, દરેક કળ પર નહીં. કયું form નું event બંધબેસે છે, અને keyup કેમ નહીં?
Show the answer
blur વાપરો: એ એક જ વાર છૂટે છે, જ્યારે ખાનું focus ગુમાવે (વાપરનાર tab દબાવે કે બીજે click કરે), જે બરાબર 'એણે આ ખાનું પૂરું કર્યું' છે. keyup દરેક કળ છૂટવા પર છૂટે છે, એટલે એ લખવાની વચ્ચે જ કચકચ કરત ('a@' અધૂરું છે પણ એને ચીંધી દેવાત). blur કુદરતી અટકાવ પર તપાસે છે. છેલ્લા દરવાજા તરીકે તમે submit પર બધું ફરી પણ તપાસો છો. Keyup એ લખતાં લખતાં શોધ જેવાં જીવતાં લક્ષણો માટે વધુ સારું છે.
Quiz
Register દબાવવાથી પાનું ફરી load થાય છે અને તમારું JavaScript તપાસી શકે એ પહેલાં form ભૂંસાઈ જાય છે. Submit ના handler ની અંદરનો પ્રમાણભૂત ઉકેલ કયો છે?
- browser ના મૂળભૂત form ના submit ને અટકાવવા e.preventDefault() બોલાવો
- submit ને બદલે mouseover વાપરો
- <form> tag સાવ કાઢી નાખો
- વધુ console.log નાં વિધાનો ઉમેરો
Show the answer
browser ના મૂળભૂત form ના submit ને અટકાવવા e.preventDefault() બોલાવો
Form ની મૂળભૂત ક્રિયા છે મોકલવું અને પાનું ફરી load કરવું; submit ના handler માં e.preventDefault() બોલાવવાથી એ અટકે છે, અને તમારું JavaScript પહેલાં validate કરીને બધું બરાબર હોય તો જ submit કરી શકે છે (A). mouseover (B) ને submit સાથે કશું લેવાદેવા નથી. Form કાઢી નાખવાથી (C) જૂથ અને submit નું event જ જતું રહે છે. Log કરવાથી (D) ફરી load અટકતું નથી. preventDefault એ client-side validation ની ચાવી છે, જે તમે Unit 5 માં પૂરેપૂરું બાંધો છો.
Watch out
Event ના ફાંદા
1. 'mouseremove' એ ખરેખરું event છે જ નહીં. ખસવાનું event છે mousemove; element છોડવાનું છે mouseout (કે mouseleave). છાપભૂલ ગોખશો નહીં.
2. submit એ form પર છે, બટન પર નહીં. <form> પર સાંભળો, અને ત્યાં જ preventDefault() બોલાવો.
3. keydown સામે keyup: keydown કળ નીચે જતાં છૂટે છે (દબાવી રાખો તો દોહરાય છે), keyup છૂટતાં એક વાર. છેલ્લે લખાયેલું મૂલ્ય વાંચવા સામાન્ય રીતે keyup વધુ સલામત છે.
Theory
Events functions બોલાવે છે, જે આગળ છે
અહીંનો દરેક handler એ function છે જેને browser તમારા વતી બોલાવે છે. Unit 5 functions ને ઔપચારિક કરે છે (parameters, return, બોલાવવું) અને પછી ખરેખરું FestConnect નું register() બાંધે છે જેને submit નું event ચલાવે છે, જે પૂરું validation કરે છે, અને સફળ થાય તો બીજા પાના પર મોકલે છે કે ભૂલ દેખાડે છે. Events એ ચાંપ છે; functions એ ક્રિયા; બંને સાથે મળીને interactivity.
Summary
Key takeaways
- Event એ વાપરનારની ક્રિયા છે જેને browser છોડે છે; handler ને addEventListener('type', fn) થી કે inline onclick થી જોડો.
- Mouse: click, mouseover (અંદર), mouseout (બહાર), mousemove, mouseup.
- Keyboard: keydown (દબાયું), keyup (છૂટ્યું).
- Form: focus (દાખલ), blur (છોડ્યું, ખાનું validate કરવા સારું), change (પાકું થયું), submit (form મોકલાયું).
- submit એ <form> પર છૂટે છે; ફરી load અટકાવીને પહેલાં validate કરવા e.preventDefault() બોલાવો. 'mousemove', 'mouseremove' નહીં.
- Memory hook: ક્રિયાઓ સાથે જોડાયેલી ઘંટડીઓ.