אובייקט האירוע

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

מהו אובייקט האירוע, איך ומתי הוא נוצר?

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

התחביר:

jQuery('selector').click(function(e){
    // Code is here 
});

מידע שמכיל האובייקט ומתי יבוא לידי שימוש

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

e.keyCode

בעת הנגשת האתר לניווט באמצעות מקלדת, וכן עבור שימוש אינטואיטיבי (= פעולות שכשנבצע אותן – מתבקש שתקרה תוצאה מסויימת, לדוגמא כשיש פופאפ פתוח – מתבקש שלחיצה על Esc תסגור אותו, או בדרופדאון – מתבקש שלחיצה למטה תוריד אותנו למטה) נרצה לדעת על איזה מקש לחץ הגולש. ניקח כדוגמה מצב של פופאפ פתוח (אני חוזרת לדוגמת הפופאפ מהמדריך הזה), שלחיצה על Esc תפעיל לנו את הפונקציה ClosePopup שסוגרת אותו (איזושהי פונקציה סגורה שקיימת לנו איפשהו). במקרה הזה די ברור שהאירוע אמור להיות .keyDown או keyUp, כדי ללכוד את הלחיצה. אם נכתוב שלחיצה סוגרת את הפופאפ – זה לא תקין ולא הדרישה, כי אולי הגולש לחץ על Enter, Tab או חץ ימינה? הרי אמרנו שרק לחיצה על מקש ספציפי תחולל לנו את הפונקציה המדוברת.

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

לאחר שאיתרנו את מס' המקש – נוכל לכתוב קוד כזה (בדוגמא אני בודקת לחיצה על Esc שהקוד שלו הוא 27)

jQuery('.popup').keydown(function(e){
    if(e.keyCode == 27)       
        ClosePopup();
 });

הדוגמה הבאה מבצעת משהו פשוט – בלחיצת מקלדת על השדה – יהיה כתוב לנו מה הkeyCode שלו.

e.shiftKey

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

כדי לבנות מלכודת מקלדת צריך להשתמש בkeyCode שראינו קודם, כדי לתפוס לחיצה על טאב (keyCode = 9), כדי ללכוד את הלחיצה על טאב באלמנט האחרון של הפופאפ ולהחזיר את הפוקוס לאלמנט הראשון, ומצד שני צריך ללכוד גם את הלחיצה על shift+tab = הפוקוס עובר לאלמנט הקודם, וזה כדי ללכוד את הפוקוס באלמנט הפוקוס-אבילי הראשון ולמנוע יציאה של הפוקוס החוצה (כאשר מהאלמנט הראשון שמקבל פוקוס בפופאפ נלך אחורנית נצא החוצה מהפופאפ, מצב לא רצוי). לא ניתן לתפוס בkeyDown שתי keyCode, אלא פעיל רק כפתור אחד. במידה ולחצו גם על שיפט וגם על טאב – נוכל להשתמש בe.shiftKey כדי לוודא לחיצה על shift + בירור האם הkeyCode הוא 9 – מה שמצביע על לחיצה על מקש הטאב.

ניתן לראות דוגמא מפורטת בפוסט שעוסק בהנגשת פופאפים.

לסיכום, האובייקט event מחזיר לנו true/false האם לחצו על מקש shift או לא.

e.ctrlKey

כמו הshift – מחזיר true/false האם לחצו גם על מקש Ctrl.

אלו המאפיינים היותר שימושיים של אובייקט האירוע. ניתן לעשות console.log לevent שלנו, כדי לראות אותו על כל הפרטים, במידת הצורך.

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

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

e.preventDefault()

זוהי למעשה פונקציה של שפת JavaScript ולא של הספריה jQuery, אבל היא מהפונקציות שפשוט חובה להכיר.

בתרגום חופשי – הימנע מהפעולה הדיפולטיבית.

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

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

הערה: לאחר שבוטלה התוצאה הדיפולטיבית – אין פקודה שמחזירה אותה. כלומר – לאחר שעצרתי לחיצה על קישור – לא ניתן לומר לדפדפן "בעצם, חזור ובצע את הדיפולט שלך". כן ניתן לעיתים לבצע בעצמנו את הפעולה שבוטלה, לדוגמא לבצע העברה לעמוד מקושר באמצעות קוד JS, או בירור מי האלמנט שאמור היה לקבל פוקוס והעברת הפוקוס ידנית אליו. מסיבה זו במידה ורוצים לעצור את הפעולה רק במצב מסויים, לאחר שאלת if כלשהי – יש לכתוב את הe.preventDefault() בתוך הסוגריים המסולסלים של שאלת הif, שבו אכן אני רוצה לבצע את העצירה הזו, ולא קודם כל לבטל ואז להתחיל לבדוק האם צריך לבטל או לבצע את הדיפולט.

e.stopPropagation()

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

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

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

דוגמה פשוטה – לינק שבתוכו span. בעיצוב שמתי את הspan בצד, עם אייקון של חץ. אני רוצה שלחיצה על הלינק תעביר אותי אכן לעמוד שאליו הוא מקשר, אך לחיצה על הספאן (שנמצא כזכור בתוך הa) רק תפתח את הדרופדאון שליד. זה מצב נפוץ בעיצוב תפריטים למובייל, כשעושים שימוש באותו HTML של הדסקטופ, כאשר יש לנו תפריט רמה שניה -תת תפריט שצריך להפתח בלחיצה. במצב הזה נלכוד את האירוע click על הspan, ובלחיצה עליו נפתח את הדרופדאון. אלא שכמו שאמרנו למעלה – האירוע קליק מבצע ביעבוע כלפי מעלה, כך שלחיצה על הspan אכן תפתח לי את הדרופדאון שלי, אך מיד אחר כך האירוע יתחולל גם על הa עצמו, ומיד יתבצע מעבר לעמוד אליו הa מקשר.

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

גם לזה יש דוגמא בפוסט על יצירת פופאפ. נסביר קצת את הנסיבות והתהליך. יש לנו שם div#overlay, שהוא הרקע הכהה שמתחת לפופאפ. בתוכו נמצא לי הdiv#popup שמכיל את הפופאפ. ל#overlay יש אירוע קליק, שסוגר את הפופאפ. מאחר והפופאפ עצמו נמצא בHTML שלי בתוך הדיב החיצוני, לחיצה בכל מקום על הפופאפ עצמו – מחוללת מיד לחיצה על הoverlay וממילא גורמת לסגירת הפופאפ. לכן הייתי צריכה להוסיף
jQuery('#popup').click(function(e){e.stopPropagation(); });

כעת האירוע לחיצה לא יבעבע כלפי מעלה, ולא יתחולל על ה#overlay.

בפרק הבא בעז"ה נדבר על trigger – יצירת אירוע על סלקטור באופן ידני.