Facebook
Twitter
RSSמדריך ארועים – התייחסות לאירועים
כריכת אירוע לקוד
יש מספר דרכים לכריכת אירוע לקוד:
- במסגרת התגית
- במסגרת התגית
- מאפייני פונקציה
- עם האלמנט 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>
| שאלה ותשובה! האם ניתן "לתפוס" את האירוע רק באובייקט בו הוא הופעל? נושא זה אינו כלול בתוכנית הלימודים. מי שמעוניין מוזמן להציץ בספר JavaScript+CSS+DOM למפתחי אתרים באינטרנט בהוצאת הוד-עמי. |
במסגרת האירוע בתגית תוכל לכתוב רצף של משפטי JavaScript המופרדים בנקודה-פסיק (;), אבל זה לא נהוג. כאשר יש לכתוב מספר משפטי ביצוע לאירוע כותבים אותם במסגרת פונקציה.
תגובות בפייסבוק