אירועים – הפונקציה on

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

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

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

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

.on()

הפונקציה on זוהי צורת הכתיבה הנפוצה כיום לכתיבת פונקציה אירוע ארוכה. רוב הפונקציות האחרות אינן אלא קיצור שלה.
התחביר הבסיסי הולך כך:

jQuery(selector).on('eventName', function(){     
// Your code here.... 
});

לדוגמא:

jQuery('#myButton).on('click', function(){
     alert('button clicked');
 });

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

יותר מאירוע אחד עם פעולה זהה

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

jQuery(selector).on('event1 event2', function(){
     // Your code here.... 
});

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

יותר מאירוע אחד, כשלכל אירוע פעולה שונה

לעיתים נרצה להגדיר לאותו סלקטור מס' אירועים, כשבכל אחד תקרה פעולה אחרת. ניתן אמנם לכתוב מס' פעמים on, ובכל פעם את האירוע והפעולה הספציפיים, אך אם ניתן לקצר את זה – למה לא?!… התחביר כעת יהיה:

jQuery(selector).on({
    event1: function(){
        // Your code here....    
    }, event2: function(){
        // second code here....
    }
});

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

הצמדת אירוע לאלמנטים שעדיין לא קיימים לנו בDOM

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

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

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

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

את הפתרון לכל זה נותנת לנו הפונקציה on. התחביר במקרה הזה הוא כזה:

jQuery(parentSelector).on('eventName', 'selector', function(){
     // Your code here.... 
});

ParentSelector = סלקטור שקיים לנו בDOM כל הזמן, מאז טעינת העמוד, לדוגמא body, או המכולה שמכילה את כל התוכן שעתיד להיטען לנו בAJAX, ולא משתנה במשך כל הזמן שהעמוד קיים. הכוונה היא לסלקטור שנמצא בהיררכיה של הDOM כהורה של הסלקטור עליו אנחנו רוצים את האירוע. לאו דווקא הורה ישיר.

selector = האלמנט/ים עליהם יקרה האירוע בפועל.

המשמעות היא כזו:

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

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

הערה

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

jQuery(parentSelector).on({
    event1: function(){
        // Your code here....    
    }, event2: function(){
        // second code here....
    }
}, selector);

עד כאן על הפונקציה on. אלו האפשרויות השימושיות יותר של הפונקציה on שהיא בעצם דרך לקרוא לאירועים ולא סוג אירוע בעצמה.
עוד על on ניתן לקרוא באתר של jQuery. בפרקים הבאים נדבר על סוגי האירועים עצמם