וובמאסטר - תיכנות ובניית אתרים

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

זהר עמיהוד/‏ 15 פברואר, 2003
F+
F-
אירועים המתרחשים כתוצאה מפעולת המשתמש - אירועים מסוג זה הינם אלה הקורים כתוצאה מפעולה שנעשתה על ידי המשתמש. כמו שבוודאי ניחשת, אירועים אלה כוללים הקשה על מקשי המקלדת ולחיצה על לחצני העכבר, אולם ישנם סוגים נוספים של אירועים אשר יכולים להתרחש כתוצאה מפעולת המשתמש בצורה ישירה או עקיפה. לדוגמה, כאשר המשתמש לוחץ על תיבת טקסט (<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-handler

אובייקט

אירוע, מתרחש כאשר

onabort

image

לא הסתיימה טעינת התמונה

onblur

button, checkbox, password, radio, select, text, window

האובייקט לא במצב focus או במילים אחרות: האובייקט שהיה פעיל לאחרונה נעזב.

onchange

select, text

המשתמש משנה טקסט בתיבת טקסט או בתיבה משולבת.

onclick

button, checkbox, document, radio, image, div

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

ondblclick

document, link

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

onfocus

button, checkbox, radio, select, window

האובייקט הפעיל.

onkeydown

document, image

מקש הוקש.

onkeypress

document, image, link, textarea

מקש הוקש ונעזב.

onkeyup

document, image, link, textarea

מקש נעזב.

onload

document, image, window

בעת טעינה.

onmousedown

button, document

לחצן בעכבר נלחץ כאשר סמן העכבר נמצא מעל לאובייקט.

onmouseup

button, document

סמן העכבר זז מעל לאובייקט.

onmouseout

div, image, p

סמן העכבר נמצא מחוץ לגבולות האובייקט (לאחר שהיה בגבולות האובייקט).

onmouseover

div, image, p

סמן העכבר נמצא על האובייקט.



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

הערה

לכל אובייקט יש event-handlers משלו. פירוט ה-event-handlers שניתן לשייך לכל אובייקט מפורטים בספר JavaScript המדריך השלם, בהוצאת הוד-עמי. או באתר Microsoft בכתובת msdn.microsoft.com/ie .



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



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


 
 
 
  
 


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

הערה

מעתה ואילך נתייחס ל- event תהיה כמו event-handler במילה אירוע וזאת מטעמי נוחות בלבד. נמשיך לעשות בינהם הבחנה היכן שהדבר הכרחי.



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

 
 
 
  
    
  
 
 

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

זהר עמיהוד

זהר עמיהוד, מומחה שיווק וקידום אתרים באינטרנט. עוזר לבעלי עסקים להביא יותר לקוחות לאתר, ליצור יותר פניות ויותר מכירות. מרצה בנושאי שיווק באינטרנט. תואר שני במינהל עסקים מטעם אוניברסיטת תל-אביב, מוסמך מטעם חברת מיקרוסופט, מחבר ספרי מחשבים רבי-מכר.
אתר: http://www.hod-ami.co.il
תגיות: JS‏  /  Javascript‏  /  DHTML‏  /  DOM‏  /  Dynamic‏  /  דינמי‏  /  ארועים‏  /  events‏  /  event‏  /  ארוע‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות