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

מדריך ארועים - התייחסות לאירועים

זהר עמיהוד/‏ 4 פברואר, 2003
F+
F-

כריכת אירוע לקוד

יש מספר דרכים לכריכת אירוע לקוד:
  1. במסגרת התגית
  2. במסגרת התגית
  3. מאפייני פונקציה
  4. עם האלמנט script


הערה

המילה כריכה היא תרגום של המילה binding. המשמעות היא קשירה, או חיבור. במקום לומר "כריכת אירוע לקוד" ניתן לומר "קישור אירוע לקוד", אלא שלמילה "קישור" יש משמעות של link. לכן, נאמר כריכה.


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

התייחסות לאירועים

כיצד ניתן לנפות את האירועים שאינך מעוניין להתייחס אליהם? התשובה היא במסגרת האובייקט. כאמור, כל אלמנט בדף HTML הוא אובייקט ואם יש לו שם שניתן לו באמצעות מאפיין name או id אז גם אפשר להתייחס אליו בעת כתיבת קוד.

כאשר אתה כותב דף HTML ורוצה להפעיל קוד רק בתנאי שהתרחש אירוע מסוים באובייקט המתאים יהיה עליו להוסיף את האירוע המתאים בתגית. בדוגמה של תמונת המטוס, התמונה היא אובייקט (אובייקט מסוג image). אם תרצה להפעיל קוד הקשור לאירוע onmouseover בעת שהסמן יעבור מעל לאובייקט תמונת המטוס יהיה עליך להוסיף את המאפיין onmouseover בתגית <img />.

הקוד בקובץ 03.html כורך את אובייקט התמונה ואת האירוע onmouesover לקוד הנכתב במסגרת התגית:
<img name="myPic" src="images/yellowPlane.gif" border="0"
 onmouseover= "window.document.myPic.src='images/bluePlane.gif';" />
המשמעות היא שכאשר יתרחש האירוע onmouseover במסגרת האובייקט <img /> יבוצע המשפט:
window.document.myPic.src='images/bluePlane.gif'; 
המשפט הזה משנה את התכונה src של האובייקט ששמו myPic (זה השם שניתן באמצעות המאפיין name של התגית <img />) במסמך (document) המופיע בחלון (window). ניתן לכתוב את המשפט הנ"ל גם כך:
myPic.src='images/bluePlane.gif';
אבל מומלץ להשתמש בדרך הארוכה והיותר ברורה.
כאשר תפעיל את קובץ 03.html ותעביר את הסמן מעל לתמונת המטוס (צהוב) תתחלף התמונה למטוס בצבע כחול.



התחביר שהוצג בקוד 03.html הוא ברור אבל ארוך ומגושם:
<img name="myPic" src="images/yellowPlane.gif" border="0"
 onmouseover= "window.document.myPic.src='images/bluePlane.gif';" />
במסגרת התגית <img />, שהיא אובייקט מסוג Image בשם myPic, יש התייחסות לאותו אובייקט: window.document.myPic . במקום השם הארוך (והמדוייק) הזה ניתן לכתוב - this. כך נראה המשפט המשופץ:
<img name="myPic" src="images/yellowPlane.gif" border="0"
 onmouseover="this.src='images/bluePlane.gif';" />
המילה this מציינת את האובייקט בו נלכד האירוע ועוד יעשה בה שימוש רב בהעברת אובייקט כפרמטר לפונקציה.
האירוע onmouseover מתרחש גם כאשר הסמן נמצא מעל אובייקט מסוג Link, התגית . בקובץ 04.html תוכל לראות את האירוע onmouseover בפעולה כאשר תעביר את הסמן מעל לקישור הוד-עמי, נותנים לך יד(ע) להצלחה.
 <html>
 <head>
 </head>
 <body>
  <p>
   <a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
    onmouseover="document.bgColor='Orange';">
    נותנים לך יד(ע) להצלחה
   </a>
  </p>

  <img name="myPic" src="images/yellowPlane.gif" border="0"
onmouseover="this.src='images/bluePlane.gif';" />

 </body>
</html>
כלומר, ברגע שמעבירים את סמן העכבר על (אירוע onmouseover) טקסט הקישור (הוד-עמי, נותנים לך יד(ע) להצלחה) תתבצע שורת הקוד הקובעת את ערך התכונה bgColor.
ומה יקרה כאשר תלחץ על הקישור? נכון, הדפדפן יטען את האתר שבכתובת http://www.hod-ami.co.il.
שים לב, המילה Orange היא מחרוזת טקסט ולכן צריך להקיפה בגרשיים. עם זאת, שימוש בגרשיים יפגע בגרשיים המקיפים את המשפט כולו, ולכן יש להשתמש בגרש בודד.
כל פקודה מסתיימת בנקודה-פסיק (;).

עכשיו נוסיף את האירוע onmouseout לשני האובייקטים. אירוע זה מתרחש כאשר הסמן, שהיה על האובייקט, מוסט ממנו ועכשיו הוא כבר אינו על האובייקט. האירוע onmouseout משמש, בדרך כלל, לכתיבת קוד להחזרת המצב לקדמתו. במקרה של דוגמה 04.html נחזיר את תמונת המטוס הצהוב ואת הרקע ללבן באופן הבא:
<html>
 <head>
 </head>
 <body>
  <p>
   <a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
    onmouseover="document.bgColor='Orange';"
    onmouseout="document.bgColor='white';">
    נותנים לך יד(ע) להצלחה
   </a>
  </p>

  <img name="myPic" src="images/yellowPlane.gif" border="0"
    onmouseover="this.src='images/bluePlane.gif';" 
    onmouseout="this.src='images/yellowPlane.gif';" />

 </body>
</html>

שאלה ותשובה!

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

נושא זה אינו כלול בתוכנית הלימודים. מי שמעוניין מוזמן להציץ בספר JavaScript+CSS+DOM למפתחי אתרים באינטרנט בהוצאת הוד-עמי.


במסגרת האירוע בתגית תוכל לכתוב רצף של משפטי JavaScript המופרדים בנקודה-פסיק (;), אבל זה לא נהוג. כאשר יש לכתוב מספר משפטי ביצוע לאירוע כותבים אותם במסגרת פונקציה.

זהר עמיהוד

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

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

תגובות למאמר



עוד במדריך

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

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