אירועי עכבר

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

התחביר הבסיסי עבור פונקציות אירועים מקוצרות

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

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

אירועי עכבר

.click

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

.dblclick

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

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

.mousedown

מתרחש בעת שהגולש לוחץ על לחצן של העכבר

.mouseup

מתרחש בעת שהגולש מרים את אצבעו מהלחצן של העכבר

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

.contextmenu

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

.mouseenter

כניסה עם העכבר מעל אלמנט

.mouseleave

יציאה של העכבר מעל האלמנט

.hover

תבנית קיצור עבור mouseenter + mouseleave. הפונקציה hover מסוגלת לקבל פונקציה אחת (שתתחולל הן בכניסה והן ביציאה) או שתי פונקציות ברצף – הראשונה עבור כניסת העכבר והשניה עבור היציאה.

לדוגמא

jQuery(selector).hover(function(){
     alert('mouseenter'); 
}, function(){
     alert('mouseleave'); 
});

.mouseover

די דומה לmouseenter(). השווה בשניהם – מזהים מעבר עכבר על אלמנט. השונה ביניהם – במידה ויש לאלמנט שעליו האירוע בנים תחתיו (מצב די נפוץ, לא?!) – במידה ונעשה שימוש בmouseenter – האירוע מתחולל על האבא בלבד, ולא על הבנים, אך אם נשמש ב mouseover – האירוע יתחולל גם כשניכנס עם העכבר מעל הבנים.

.mouseout

יציאת העכבר מעל אלמנט. מתנהג כלפי האלמנטים הבנים באותה צורה כמו mouseover.

ניתן לראות את ארבעת הפונקציות הדומות בדוגמא הבאה:

.mousemove

מתרחש בעת כל תזוזת עכבר מעל אלמנט

 

אלו כל האירועים שקשורים לעכבר. בחלק הבא אי"ה נדבר על אירועי מקלדת ועוד.