ארועים
מה זה אירוע?
אירוע הוא פעולה שמבוצעת/מתרחשת על אלמנט בדף ה-HTML, כמו לחיצה על כפתור, העלאה של דף, הכנסת טקסט לתיבת טקסט, או כל פעולה אחרת על אלמנטים בדף.
המשתמש לחץ על כפתור בדף? התרחש אירוע של לחיצת כפתור.
המשתמש מילא את הטופס ונתקל בשגיאה? התרחש אירוע של שגיאה בטופס.
המשתמש עבר עם העכבר על הטקסט? התרחש אירוע של מעבר עכבר על טקסט.
jQuery מותאמת במיוחד כדי להגיב לאירועים השונים (מה שהופך את הגלישה לידידודית יותר למשתמש).
איך נשתמש באירועים?
כרגיל, הכי קל ללמוד ע"י המחשה.
הקוד הבא מסתיר את האלמנט "textToHide" כשמתרחש האירוע של לחיצה על כפתור:
$("button").click(function(){
$('#textToHide').hide();
});
מה בעצם ראינו בדוגמה?
דבר ראשון בחרנו את האלמנט שאנחנו רוצים "להאזין" אליו. אנחנו רוצים להאזין לאירוע לחיצה על הכפתור, אז נבחר את אלמנט הכפתור ע"פ הכללים שלמדנו בשיעור הקודם:
$("button")
אח"כ נרשום את שם האירוע (יש מאגר אירועים קיימים ל jQuery, ניתן תמיד להתעדכן בהם כאן:
.click
ואח"כ נרשום פונקציה שבתוכה נכניס את הקוד שנרצה שירוץ כשהאירוע יתרחש:
$("button").click(function(){
// כאן נכניס את הקוד שירוץ כשהאירוע יתרחש
});
וזהו הקוד הנ"ל עובד?
לא בדיוק. בשביל שהוא יעבוד צריך עוד משהו:
אם נרשום את הקוד ישר ככה בדף – הקוד ירוץ מייד עם פתיחת הדף, לפני שהאלמנטים יווצרו על הדף. מה שיקרה זה שעדיין לא יהיו כפתורים, קוד ה jQuery לא ימצא שום כפתור (כי הכפתורים עדיין לא נוצרו) ולא יתרחש כלום.
אז מה נעשה?
נאזין לאירוע "ready" של הדף.
האירוע "ready" אומר שהדף כבר מוכן, ולכן כל האלמנטים כבר נוצרו ואפשר לכתוב עבורם קוד.
ככה אנחנו מאזינים לאירוע ready של הדף (הכללים בדיוק אותם הכללים כמו האזנה לאירוע click של הכפתור):
$(document).ready(function() [
//כאן נכתוב את הקוד שמאזין לאלמנטים השונים
) ;
וזו הדוגמה המלאה שעובדת:
$(document).ready(function() [
$("button").click(function(){
$('#textToHide').hide();
});
);
לשיעור זה מצורף קובץ בשם "events1.html" – עברי על הקוד שלו וודאי שאת מבינה אותו. הריצי את הדף בדפדפן ותראי איך הקוד פועל.
דוגמאות נוספות לאירועים
הדוגמה הבאה מקפיצה פופאפ עם הטקסט "עברת עלי עם העכבר" – בזמן שהמשתמש עובר עם העכבר על האלמנט p1:
$("#p1").mouseenter(function(){
alert("עברת עלי עם העכבר!");
});
הדוגמה הבאה מסתירה את האלמנט inputLabel מתי שה input נהיה בפוקוס:
$("input").focus(function(){
$("#inputLabel").hide();
});
לשיעור זה מצורף קובץ בשם "events2.html" – עברי על הקוד שלו וודאי שאת מבינה אותו. הריצי את הדף בדפדפן ותראי איך הקוד פועל.
שימוש בפרמטר this
כשמריצים קוד באירוע – ניתן להשתמש בפרמטר this. פרמטר זה מכיל את האלמנט שעליו התרחש האירוע.
הדוגמה הבאה מאזינה לכל אלמנטי ה DIV בדף – לחיצה על כל DIV מחביאה את ה DIV הספציפי שעליו המשתמש לחץ:
$("div").click(function(){
$(this).hied();
});
לשיעור זה מצורף קובץ בשם "events3.html" – עברי על הקוד שלו וודאי שאת מבינה אותו. הריצי את הדף בדפדפן ותראי איך הקוד פועל.
תזמון אירועים
ניתן ב jQuery לתזמן אירועים.
לדוגמה: אפשר בעזרת הקוד לדמות לחיצה על כפתור, פוקוס לשדה וכו'. כל אירוע שקיים ברשימת האירועים של jQuery – ניתן גם להפעיל את האירוע.
איך?
הדוגמה הבאה מפעילה את האירוע click בכפתור:
$("button").click();
הדוגמה הבאה מפעילה את האירוע hide ב div (אפשרות שהשתמשנו בה כבר הרבה):
$("div").click(function(){
$(this).hide();
});
אירועים שימושיים
אירועים הקשורים לעכבר:
1.click – לחיצה על האלמנט
2.dblclick – לחיצה כפולה על האלמנט
3.mouseenter – העכבר נכנס לשטח האלמנט
4.mouseleave – העכבר יוצא משטח האלמנט
אירועים הקשורים למקלדת
- keypress – לחיצת מקש כלשהו על המקלדת
2.keydown – לחיצת מקש על המקלדת – רגע ירידת המקש למטה
3.keyup – לחיצת מקש על המקלדת – רגע עלית המקש בחזרה
אירועים הקשורים לטופס
1.submit – שליחת הטופס
2.change – שינוי ערך בשדה
3.focus – כשאלמנט מקבל פוקוס
4.blur – כשאלמנט אב פוקוס
אירועים הקשורים למסמך/חלון
1.load – מתרחש אחרי טעינת האלמנט
2.resize – שינוי גודל החלון 3.scroll – גלילה
4.unload – הורדת האלמנט מהדף
תרגילים
- צרי קובץ HTML עם כפתור. האזינה לאירוע click של הכפתור, כשהמשתמש ילחץ על הכפתור הציגי הודעה מתאימה.
- צרי קובץ HTML עם תמונות, הגדירי שמעבר עכבר על התמונה תעלים את התמונה שעליה עבר העכבר.
- צרי טופס חיפוש. הגדירי את השדות בטופס ככה שהאירוע change (שינוי ערך בשדה ואח"כ לחיצה על ENTER או יציאה מהשדה) תשלח את הטופס (submit).
- צרי טופס נוסף, הגדירי ששינוי ערך בשדה "שם פרטי" יגרום לכך שהפוקוס יעבור לשדה "שם משפחה".
- הוסיפי אלמנט בראש הדף, הגדירי שגלילה של הדף (scroll) יעלים את האלמנט.
שלחי אלי את התרגילים הפתורים במייל חוזר.
בהצלחה!