מדריך ארועים – הבנת סדר האירועים

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

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

• זיהוי האפשרות שמספר אירועים יתרחשו.
• זיהוי איזה אירועים יתרחשו כאשר המשתמש מבצע פעולה מסוימת.
• הבנת סדר התרחשות האירועים.
• בדיקת הקשר בין אירועים שונים העלולים לפעול בו זמנית. במיוחד יש לשים לב לאירועים onblur ו- onfocus.

האירוע onclick במסגרת התגית<a>

בדפים קודמים נעשה שימוש באירועים onmouseover ו-onmouseout במסגרת התגית<a>. כאשר נלחץ העכבר על האובייקט (על הקישור) נטען לחלון הדפדפן הדף שכתובתו נמצאת במאפיין href. מה יקרה במצב בו תרצה לכתוב קוד שיופעל בעת התרחשות האירוע onclick לתגית<a>?

התבונן בקוד הבא:

<a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
    onclick="document.bgColor='Orange';" >

מה לדעתך יקרה?

1. הרקע של המסמך ישתנה לכתום ורק אחר כך יטען אתר הוד-עמי שכתובתו רשומה שמאפיין href,
2. הרקע של המסמך לא ישתנה לכתום, יטען אתר הוד-עמי שכתובתו רשומה שמאפיין href,
3. הרקע של המסמך ישתנה לכתום ואתר הוד-עמי שכתובתו רשומה שמאפיין href לא יטען,
4. לא יקרה דבר בעת לחיצה על הקישור.

מכיון שאתה עשוי שלא להבחין בהתרחשות האירועים בגלל מהירות (או עייפות) הוספתי עוד משפט JavaScript אחד שיעצור רגע לפני – משפט alert():

<a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
    onclick="document.bgColor='Orange';alert('כתום?');" >

משפט alert() יציג תיבת דו-שיח ובה המילה כתום? שיהיה עליך לאשר. כך, תוכל לדעת בודאות שאכן משפטי JavaScript שנכתבו במסגרת האירוע onclick של התגית<a> אכן הופעלו, אם הופעלו.
עכשיו נסה לענות על השאלה.

ריבוי אירועים בפעולה יחידה

אחת הבעיות בטיפול בריבוי אירועים היא שהמשתמש יכול לתקשר עם התוכנית בהרבה צורות. לדוגמה, הוא יכול להגיע לתיבת הטקסט בעזרת העכבר או בעזרת מקש TAB. היכן היה ה- focus לפני התנועה לתיבה ו/או לפני הלחיצה על לחצן שלח טופס? כפי שתראה, ריבוי האפשרויות עלול לגרום לבלבול.

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

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

קח בחשבון, לדוגמה, את תיבת הדו-שיח המיועדת לכניסת המשתמש ל-Windows. אם נתאר לנו שתיבה זו נכתבה כדף HTML, אזי שבזמן הקלדת שם המשתמש והסיסמה קורים כמה אירועים.

קודם כל, הבה נבחן הקשת מקש בודדת. לכל תו שנקליד בשם המשתמש מתרחשים שלושה אירועים: onkeypress, onkeydown ו-onkeyup (בסדר זה). כאשר אתה מזיז את הסמן משדה שם המשתמש אל שדה סיסמה, אתה מעביר את ה-focus מאובייקט אחד למשנהו, כך שמתרחשים שני אירועים: blur עבור האובייקט הנוכחי (שם משתמש), ו-focus עבור האובייקט החדש (סיסמה).

לבסוף, כאשר לוחצים על לחצן OK, לחיצת העכבר הפשוטה יוצרת שלושה אירועים: onmousedown, onmouseup ו-onclick. אם נלחץ לחיצה כפולה על אובייקט אחר, כגון הטופס, יווצרו שני אירועים נוספים לאחר האירוע onclick: ondblclick ו-onmouseup נוסף. סך הכל יש כבר חמישה אירועים הקשורים למה שנראה כפעולה יחידה של המשתמש. בנוסף, אם לחיצת העכבר גורמת ל-focus לעבור מאובייקט אחד לשני, מתרחשים גם אירועים blur ו-focus, סך הכל שבעה אירועים.

העובדה שניתן לבצע פעולות שונות כדי להגיע לאותה מטרה מהווה בעיה נוספת. לדוגמה, בואו נבחן את הלחצן OK בתיבת זיהוי המשתמש של Windows. האם ידעת שניתן להפעיל אותו על ידי לחיצה על העכבר וגם על ידי מעבר אליו עם מקש Tab והקשה על מקש הרווח? השימוש בעכבר לביצוע המשימה מפעיל את שגרות onmousedown, onmouseup ו-onclick, בעוד ששימוש במקלדת מפעיל את שגרות onkeydown, onkeypress, onkeyup ולבסוף את שגרת onclick. תהליך מבלבל, הלא כן?

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

• onmousedown
• onmouseup
• onclick

במקרה של לחיצה כפולה הסדר הוא:

• onmousedown
• onmouseup
• onclick
• ondblclick

שים לב שאירוע onclick מתרחש רק לאחר שלחצן העכבר נלחץ (onmousedown) ושוחרר (onmouseup).