מדריך jQuery – אירועים – שימוש בפונקציות trigger, one

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

.trigger()

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

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

שימוש נוסף הוא כשיש לנו אלמנט עם פונקציה שקורית באירוע מסויים, ומשתמשת במאפיינים של האלמנט. בנוסף יש לנו אלמנט אחר, שעליו יש פונקציה אחרת, שמחוללת מס' דברים ובין השאר מדמה לחיצה על האלמנט הראשון. לדוגמא הדמיה של דרופדאון באמצעות ul-li, שמתכתב עם תיבת select מקורית של HTML.

הדרך הארוכה – התחביר די דומה לפונקציה on:

jQuery('selector').trigger('event');

לדוגמא:

jQuery('#closeBtn').trigger('click');

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

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

jQuery('#closeBtn').click();

יחולל לחיצה על #closeBtn.

.one()

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


עד כאן נושא האירועים בjQuery.

בפרק הבא נעבור לדבר על קריאה לשרת – Ajax

כתוב/כתבי תגובה