אירועי מקלדת, טפסים, דפדפן וטעינה

בחלק הזה נפרט בעז"ה על אירועים נוספים בjQuery – אירועי מקלדת – שלבים שונים של לחיצה על המקשים, אירועים שקשורים לטפסים, אירועים שקשורים לחלון הדפדפן ואירועים הקשורים לשלבי טעינת העמוד שלנו.

אירועי מקלדת

.keydown

מתרחש בעת לחיצה על מקש כלשהו

.keyup

מתרחש בעת הרמת האצבע מעל המקש

.keypress

מתרחש בכל משך הלחיצה

אופן השימוש

בכל אירועי המקלדת ניתן לתפוס את הe, ואז לשאול על איזה מקש לחצו. לדוגמה

jQuery('button').keydown(function(e){
    console.log(e.keyCode); 
});

זה בא מאד לידי שימוש בנגישות בנושא ניווט מקלדת.

אירועי טפסים

.focus

מתרחש בעת פוקוס על אלמנט. יש לזכור שלא כל אלמנט מסוגל לקבל פוקוס, אלא רק האלמנטים הבאים: a, button, input, textarea, select וכן אלמנטים שהוגדר עבורם המאפיין tabindex.
אירוע פוקוס מתחולל הן בעת לחיצה, הן בעת מעבר טאבים/ניווט מקלדת אחר והן באמצעות סקריפט שגורם לפוקוס (מה שנקרא trigger, ונדבר עליו גם בהמשך בעז"ה).

.blur

מתרחש בעת יציאת הפוקוס מהאלמנט.

.focusin

מתרחש בעת כניסת פוקוס לסלקטור או לבנים שלו. אירוע זה דומה לאירוע focus שדיברנו עליו למעלה, מלבד ההבדל הברור – האירוע פוקוס מתחולל כאשר נכנס הפוקוס לסלקטור עצמו, לכן הסלקטור אמור להיות אלמנט שמסוגל לקבל פוקוס. לעומת זאת פוקוס-אין מתחולל גם כאשר אחד הבנים של הסלקטור מקבל פוקוס, לכן הסלקטור יכול להיות איזשהו אלמנט חיצוני, שמכיל מס' אלמנטים המסוגלים לקבל פוקוס.

.focusout

המקבילה של .blur, ההתנהגות בדומה ל.focusin.

.change

מתרחש בעת שינוי ערך של פקדים (input, textarea, select).

עבור הפקדים select, input[type=radio], input[type=checkbox] האירוע מתחולל ברגע השינוי עצמו – הלחיצה על העכבר או על מקש המקלדת שמשנה את הבחירה הקודמת.

עבור סוגי input אחרים וכן עבור textarea האירוע מתחולל רק בעת יציאת הפוקוס מהפקד, כמובן רק במידה והתוכן השתנה.

מתרחש בעת שינוי ערך (value) של שדה מסוג: select, radio, checkbox.

.select

מתרחש בעת סימון טקסט בפקד טקסט רגיל או בפקד textarea. אירוע לא מי יודע מה שימושי. אלא אם אתם רוצים שבעת סימון טקסט יופיע איזשהו טולטיפ שיאפשר לגולש לבצע דברים שונים על הטקסט שסימן – הדפסה, העתקה ועוד.

.submit

מתרחש בעת שליחת טופס. לעיתים נרצה ללכוד את האירוע הזה לצורך בדיקות ואלידציה, הצגת loader עד להופעת הודעת תודה וכדו'.

אירועי דפדפן

.scroll

מתחולל בעת גלילה של חלון הדפדפן או של אלמנט בעל גלילה פנימית. האירוע מתחולל בין אם גללו עם החיצים, עם כפתור הגלילה של העכבר או בכל דרך אחרת.

לא מומלץ להשתמש באירוע הזה כאשר בונים רספונסיבי, מאחר והוא מתנהג בצורה שונה בחלק מהמכשירים. ברוב הדפדפנים והמכשירים האירוע קורה בכל רגע של גלילה, אך יש בודדים שהאירוע מתחולל רק כאשר הסתיימה הגלילה.

מתי נשתמש בו? בעיקר לאפקט parallax. באפקט זה אלמנט אחד בעמוד, או רק תמונת רקע של אלמנט – זזים בקצב שונה מאשר הקצב שבו נגלל העמוד, וזה יוצר אפקט של עומק, תלת מימד, או כיסוי של תוכן אחד על תוכן שני. (מקווה לכתוב פוסט מיוחד על הנושא הזה בעתיד בעז"ה), ובנוסף scroll יכול להיות שימושי כשרוצים להכניס קומות שונות בעמוד ככל שמתקדמים בגלילה, כך שהאלמנטים ייכנסו לגולש כשהוא מגיע אליהם.

.resize

מתרחש בעת שינוי גודל התצוגה, הן בשינוי לרוחב ואין בשינוי לגובה. לא מומלץ להשתמש בו, מאחר ובמהלך פעולת ההקטנה/הגדלה – בכל רגע של שינוי זה קורה, ולא רק כשהעכבר מסיים את פעולתו.

מתי כן נרצה להשתמש באירוע הזה? כשיש לנו למשל סקריפטים שאמורים להתחולל בשתי צורות שונות בהתאם לרוחב המסך (לצורך רספונסיביות), או לדוגמא בפלאגין הזה (isotope.js), שמסדר את האלמנטים בעמוד לפי רוחב וכו'. נסו להקטין את המסך ותוכלו לראות את השינוי שקורה בעת האירוע.

אירועי טעינה

.ready

אירוע חשוב מאד. אירוע זה שייך לdocument בלבד. כלומר, בסלקטור של הסקריפט של האירוע לא ניתן להגדיר אלמנטים אחרים (ואם כן, לדעתי זה יתנהג כאילו הגדירו את הdocument כסלקטור.)

האירוע מתחולל כשהDOM (document object model = כל עץ  הHTML שמכיל העמוד) מסיים להטען. לא בטוח שנטענו כל המשאבים שהעמוד משתמש בהם (משאבים = תמונות, קבצי CSS וקבצי הJS).

מאחר ורוב הסקריפטים שלנו כתובים  בדרך כלל בקובץ JS נפרד ולא בקובץ הHTML עצמו – כשהאירוע ready מתחולל סביר להניח שחלק גדול מהמשאבים כבר נטענו לעמוד. זו הסיבה שרוב הפלאגינים של JS מדגישים שאת קובץ הJS של הפלאגין יש לטעון לפני הפונקציה שקוראת לפלאגין לביצוע.

.load

מתרחש בעת טעינה מושלמת של העמוד או של משאב. לדוגמא אם יש לנו תמונה שאליה מוצמד אירוע load – רק כאשר התמונה מסיימת להיטען מהשרת האירוע מתחולל.

מובן מאליו שאירוע זה מתחולל אחרי האירוע .ready. נחדד את ההבדלים:

.ready מתחולל כאשר הDOM מוכן. קיימים לנו כל האלמנטים של הHTML כולל div, p, img (כתגית, לא בטוח שהתמונה עצמה הספיקה להטען לנו כבר מהשרת, אבל ידוע לנו כבר מה הsrc שלה). בשלב הזה אנחנו כבר יכולים להתחיל לעשות מניפולציות על האלמנטים, כמו להזיז, לשנות, להוסיף קלאס, ללכוד מאפיינים, ללכוד אלמנטים וכו'. כל הHTML כבר כתוב לדפדפן.

לעומת זאת האירוע load מתחולל אחר כך. בשלב שבו הדפדפן סיים לטעון את כל המשאבים (שהם כמו שאמרנו – תמונות, CSS, JS ועוד חומרים שלא כתובים בHTML עצמו אלא יש לצרף אותם מהשרת או ממקורות חיצוניים).

בAPI של jQuery מצורף המידע הבא: מאחר ובוני אתרים אוהבים לעשות שימוש בפונקציה על תמונות באתר – כדי לחולל פונקציות אחרות רק כאשר ידועות לנו כל התמונות על גודלן ומשקלן – חשוב לדעת שיש לפונקציה מספר אזהרות לגבי שימוש כזה. למשל כאשר תמונה קיימת פעמיים בעמוד – ישנה בעיה עם התמונה השניה, בנוסף כאשר תמונות שמורות בcache (זיכרון המטמון של הדפדפן). אין מה לעשות נגד זה, פשוט צריך לדעת.

הערה חשובה: יש להבדיל את האירוע הזה מהפונקציה .load() שמבצעת גישה לשרת (Ajax), עליה נפרט בעז"ה בפרק המיוחד לפונקציות Ajax.

מה הלאה?

כעת, לאחר שאנחנו מכירים את כל סוגי הפונקציות – הגיע הזמן לדבר על אובייקט האירוע. בחלק הבא בעז"ה.