הוספת אירוע מותאם אישית

מהם אירועים מותאמים אישית בjQuery?

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

דוגמאות? בבקשה:

• יש לנו פופאפים שונים באתר. כל הפופאפים נסגרים באותה פונקציה של closePopup. נוכל להגדיר בסוף הפונקציה closePopup, שמתחולל אירוע בשם afterClosePopup על הDIV שמשמש כפופאפ שנסגר. כך נוכל אחר כך להגדיר events שונים שיקרו אחרי סגירת פופאפים ספציפיים.
  לדוגמה אם יש לנו פופאפ שמכיל iframe של יוטיוב. כאשר סוגרים את הפופאפ שמכיל את האייפריים הזה – אנחנו רוצים להסיר את האייפריים, כדי שהוא לא ימשיך לנגן ברקע (וקרו לי דברים מעולם….). נוכל להשתמש באירוע של afterClosePopup עבור הפופאפ הספציפי הזה בלבד, ובאירוע הזה להסיר את האייפריים מהHTML שלנו.
• בתוספי JS רבים ישנם אירועים מוגדרים, שאנחנו יכולים להשתמש בהם כדי לבצע קסטומיזציה על אופן הפעולה של התוסף. לדוגמה בתוסף שנקרא slick slider, ישנו אירוע init, שקורה מיד לאחר איתחול הסליידר, אירוע בשם afterChange – קורה מיד אחרי התחלפות שקופיות בסליידר, וכדו'. כך אנחנו יכולים "להתלבש" על אירועים שקורים בנקודות זמן שונות לאורך חיי הסליידר, ולהוסיף שם את הקוד שלנו.

איך יוצרים אירוע מותאם אישית?

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

jQuery(SELECTOR).trigger('EVENT_NAME', [PARAMS]);

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

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

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

לדוגמה:

var index = 2;
jQuery(this).trigger('afterClosePopup', [index]);

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

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

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

כעת אם נניח שיש לפופאפ הפתוח (לפני שהוא נסגר) את הקלאס "activePopup", הרי שהקוד של סגירת הפופאפים ייראה כך:

jQuery('.closePopupBtn').on('click', function(){
    jQuery('.activePopup').removeClass('activePopup').trigger('afterPopupClose', [jQuery(this)]);
});

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

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

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

איך משתמשים באירוע מותאם אישית?

בדיוק כמו בכל אירוע jQuery אחר.

אם לדוגמה הגדרנו את האירוע afterClosePopup – נוכל להשתמש בו באופן הבא:

jQuery('#iframePopup').on('afterPopupClose', function(){
    jQuery(this).find('iframe').remove();
});

ואם שלחנו פרמטרים לאירוע, נניח שלחנו את הכפתור שסגר את הפופאפ:

jQuery('.popupWithCloseAnimation').on('afterPopupClose', function(event, trigger){
    if(jQuery(this).data('type') == 'cancel') // אם לחצו על ביטול
        jQuery(this).addClass('cancelClose'); // תן לפופאפ קלאס שיגדיר אנימצית ביטול
    else // אם לחצו על אישור
        jQuery('this).addClass('approveClose'); // תן לפופאפ קלאס אחר, שמגדיר אנימצית אישור
});

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

עד כאן לבינתיים.