ראשי > מבוא > חיבור אירועים

חיבור אירועים

לעיתים קרובות, תרצה סוג של אות שיגרום ל-DHTML להיכנס לעמוד. לא משנה אם אתה משנה מיקום של בלוק או משנה הגדרות עיצוב, בכל מקרה אירוע מסוים יגרום לשינוי.

סוגים רבים של אירועים יכולים להתרחש בעמוד אינטרנט, רובם נגרמים ע"י המשתמש. הוא או היא עשויים להקיש על מקש (אירוע מסוג click), או להזיז את העכבר מעל אלמנט (אירוע מסוג mouseover). המשתמש עשוי לשלוח טופס (אירוע submit) או לשנות את גודל חלון הדפדפן (אירוע מסוג resize). בנוסף, מספר אירועים יכולים להתרחש ללא התערבות ישירה של המשתמש—לדוגמה, העמוד יכול לסיים את טעינתו (אירוע load).

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

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

מנהלי אירועים

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

מנהל אירוע נוצר כתכונה עבור התג שמגדיר את האלמנט שבו אתה רוצה לתפוס את האירוע. לתכונת מנהל האירועים מוגדר שם ע"י onEventname, והיא פועלת לפי הצהרות JavaScript שמוגדרות בה. לדוגמה: התג הבא יוצר קישור שכלול בו ניהול אירוע mouseover:  

<A HREF="page.html"
   onMouseOver="changeStatus('Read this page');
   return true">
Click here
</A>

מנהל האירוע onMouseOver תופס את האירוע mouseover. כאשר קורה אירוע כזה באלמנט, נקראת פונקציה של JavaScript בשם changeStatus(). זו פונקציה מדומה, אתה יכול לדמיין שהיא קיימת כדי לשנות את המסר בשורת המצב של הדפדפן. כל הצהרה של JavaScript ניתנת לשימוש במנהל אירועים, כך שניתן גם לבצע הצהרות ישירות במקום לקרוא לפונקציה. למשל, נגיד שאירוע mouseover ב-MSIE יגרום לשינוי צבע העמוד:

<A HREF="page.html"
onMouseOver="document.styleSheets[0].rules[0].style.color='blue'">
Click here</A>

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

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

האירוע	מנוהל ע"י	קורה כאשר
click	onClick	המשתמש מקיש עם כפתור העכבר על אלמנט
submit	onSubmit	המשתמש שולח טופס לפני שעובד
reset	onReset	המשתמש מאתחל טופס
focus	onFocus	המשתמש מתמקד באלמנט ע"י לחיצת עכבר
blur	onBlur	המשתמש מפסיק להתמקד באלמנט
mouseover	onMouseOver	המשתמש מעביר את העכבר מעל אלמנט
mouseout	onMouseOut	המשתמש מזיז את העכבר מאלמנט
mousemove	onMouseMove	המשתמש מזיז את העכבר
change	onChange	המשתמש משנה ערך של שדה מידע
select	onSelect	המשתמש בוחר(ע"י הארה) חלק משדה מידע
resize	onResize	המשתמש משנה גודל של חלון דפדפן או מסגרת
move	onMove	המשתמש מזיז את חלון הדפדפן או המסגרת
load	onLoad	עמוד מסיים להיטען
unload	onUnload	המשתמש יוצא מהעמוד ע"י עזיבת הדפדפן או טעינת עמוד אחר
error	onError	התרחשה טעות בזמן טעינת עמוד או תמונה
abort	onAbort	המשתמש מפסיק את טעינת העמוד ע"י כפתור

הטבלה למעלה היא מדריך מהיר. כדאי לזכור מספר אזהרות. ראשית, זו לא רשימה מלאה של כל האירועים, למרות שמופיעים בטבלה כל האירועים הנפוצים. שני הדפדפנים תומכים באירועים נוספים כדי לעקוב אחרי מקשים שנלחצים ואחרי פעולות העכבר, ו-MSIE תומך ביותר אירועים מאשר נוויגטור. שנית, אתה חייב לזכור שלא כל אירוע מתאים לכל אלמנט. גם זה משתנה בין הדפדפנים. לדוגמה, בנוויגטור אירוע mouseover מתאים רק לקישור <A>, לאזור <AREA> או לרובד <LAYER>. ב-MSIE, לעומת זאת, תוכל ליישם אירוע mouseover כמעט לכל אלמנט, כולל תמונות <IMG> ופסקאות <P>.  

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

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

<A HREF="somepage.html" TARGET="mainframe" 
STYLE="color:blue; font-weight:normal; font-family:Arial;"
onMouseOver="this.style.color='red';this.style.fontWeight='bold'"
onMouseOut="this.style.color='blue';this.style.fontWeight='normal'">
Today's special</A>

דוגמה ל -rollover:

  לעמוד הקודם      לעמוד הראשי        לעמוד הבא