מדריך ארועים – טיפול באירועים חלק ב'

אירועים המתרחשים כתוצאה מפעולת המשתמש
– אירועים מסוג זה הינם אלה הקורים כתוצאה מפעולה שנעשתה על ידי המשתמש. כמו שבוודאי ניחשת, אירועים אלה כוללים הקשה על מקשי המקלדת ולחיצה על לחצני העכבר, אולם ישנם סוגים נוספים של אירועים אשר יכולים להתרחש כתוצאה מפעולת המשתמש בצורה ישירה או עקיפה. לדוגמה, כאשר המשתמש לוחץ על תיבת טקסט (<input type='text' />) כדי לערוך את המידע הנמצא בתיבה, אירוע הלחיצה גורם לטעינת event-handler בשם onclick עבור תיבת הטקסט. בנוסף לכך, ישנם עוד event-handlers המתרחשים כתוצאה מהלחיצה.

אחד מה-evenrt-handlers הללו הינו onfocus המתרחש עבור תיבת הטקסט. אירוע זה מתרחש בכל פעם שהסמן נמצא באזור התיבה בין אם נלחץ לחצן העכבר או בשימוש במקש TAB. בנוסף, כאשר תיבת הטקסט נמצאת במצב onfocus, אובייקט אחר חייב לאבד את ה-onfocus שלו. פעולה זו גורמת לטעינת event-handler בשם onblur להתרחש עבור האובייקט השני. onfocus ו-onblur מתרחשים כתוצאה מפעולות המשתמש, בדיוק כמו onclick. כמו שנראה בחלק הבא הבנת סדר האירועים, ישנם מצבים שבהם קורה ריבוי של events-handlers כאשר המשתמש מבצע אירוע בודד. בנוסף, חשוב להבין את הסדר שבו מופעלים כל ה-event-handlers.

הרשימה הבאה מכילה רשימה חלקית של אירועים המתרחשים כתוצאה מפעילות של המשתמש:

• הקשה על מקש.
• לחיצה על לחצן העכבר.
• הזזת העכבר.

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

הרשימה הבאה מכילה רשימה חלקית של אירועים המתרחשים כתוצאה מפעילות של המערכת:

• טעינת דף.
• התרחשות שגיאה בעת טעינת דף או תמונה.

למרות העובדה שמסמכים ואובייקטים מסוגלים לטפל בסוגים רבים של אירועים, לרבים מהאובייקטים יש event-handlers משותפים, כפי שניתן לראות בטבלה 1. בטבלה 1 מובאות דוגמאות ל-event-handlers (יש למעלה מ120- event-handlers) ושייכותם לאובייקטים (יש למעלה מ140- אובייקטים).

: אירועים אופייניים לאובייקטים רבים (רשימה חלקית לאירועים ולאובייקטים)

בוודאי שמת לב שכמה מה-event-handlers נראים כאילו הם מתייחסים לאותה פעולה של המשתמש. לדוגמה: onclick, onmousedown ו-onmouseup קורים כאשר המשתמש לוחץ על לחצן העכבר. onclick מדווח שבוצעה לחיצה ואין בו מידע לגבי הלחצן שנלחץ. onmousedowm ו-onmouseup מדווחים רק אם הלחצן השמאלי בעכבר נלחץ או נעזב בהתאמה.

הדוגמה הבאה,
קובץ 01.html,
מציגה תמונה של פרח בחלון:

הנה הקוד לפניך :

כאשר אתה מזיז את העכבר או לוחץ עליו (אירוע) מתרחשים event-handlers. אם למשל תציב את סמן העכבר מעל לתמונה, זהו האירוע mouseover, יתרחש event-handler בשם onmouseover. נכון, שום דבר לא התרחש כי לא כתבת קוד שיטפל באירוע (את זה מיד נעשה). האירוע onmouseover התרחש. לא קרה דבר בגלל שהדפדפן לא ידע מה לעשות עם האירוע ולכן האירוע "התנדף". תוכל להזיז את הסמן מחוץ לתמונה ושוב יצרת אירוע שהפעם נקרא שהפעיל event-handler בשם mouseout וגם הפעם לא התרחש דבר כי לא נכתב קוד לטיפול באירוע. כמו שנאמר, יש אירועים שיופעלו גם אם לא כתבת קוד שיטפל בהם, למשל, לחיצה על קישור.

בקוד שלפניך
(קובץ 02.html)
התמונה משמשת קישור לאתר הוד-עמי כפי שהוגדר במסגרת התגית <a>. כאשר תציב את הסמן מעל התמונה (אירוע onmouseover) הסמן ישנה את צורתו מ- ל- . כאשר תסיר את הסמן מהתמונה, שהיא קישור (אירוע onmouseout) הסמן ישנה את צורתו מ- ל- . כאשר תבצע לחיצה בעכבר (אירוע onclick) יופעל הקישור ואתר הוד-עמי יטען בחלון. כל האירועים שנסקרו: onmouseover, onmouseout ו-onclick הופעלו למרות שלא כתבת קוד, כי אלה אירועים של התגית <a> והם מובנים בדפדפן (זהו אובייקט מסוג link). כלומר בכל פעם שהוא רואה את התגית <a> הוא כבר יודע מה לעשות וכיצד לנהוג.

תמונת המטוס היא קישור לאתר הוד-עמי. הדפדפן יודע כיצד לנהוג כאשר תציב את הסמן מעל הקישור.