אירועים (events) ב Javascript

(מדריך Javascript מתאים ומתעדכן עבור התלמידים בקורס full stack של החיפושית)

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

רישום לאירוע

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

שיטה 1: רישום ב html:

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

שיטה 2: משתמשת בתכונה של אובייקט DOM ומתבצעת ב Javascript (אבל גם היא לא הכי מומלצת):

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

שיטה 3:  השיטה המומלצת.

כך נוסיף לרכיב פונקציית טיפול (handler) ואחר כך אפשר יהיה להוסיף עוד אחת.

 אירועי עכבר

mousedown – כאשר כפתור העכבר יורד.

mouseup – כאשר כפתור העכבר עולה

click – עלייה וירידה של העכבר בזמן קצר

mouseover – כאשר העכבר עולה על הרכיב

mouseout – כאשר העכבר יורד מהרכיב

mousemove – יוצר אירועים תוך כדי תנועה

אירועי  מקלדת

keydown – מקש במקלדת נלחץ כלפי מטה

keyup – מקש במקלדת עלה

keypress – מקש במקלדת נלחץ

 

אירועי focus  ו blur

focus – רכיב המסוגל לקבל אירועי מקלדת (למשל keypress) הפך עכשיו לרכיב default עבור המקלדת

blur – רכיב שהיה default איבד את התכונה הזו.

 


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *