ארועים ב-JavaScript

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

בדוגמה הבאה נשתמש בשורה הבאה:

document.write("בניית אתרים זה כיף!")

השורה הזאת אומרת בסה"כ לכתוב בדף את המילים "בניית אתרים זה כיף!", והיא אומרת את זה ב-javascript.

סקריפט שמתרחש עם עליית הדף

את שורת הקוד נכניס בין התגים, כמו שלמדנו בשיעור הקודם, ואת הכל יחד נכתוב בין תגי ה-body:

<script type="text/javascript">
<!--
document.write("בניית אתרים זה כיף!")
//-->
</script>

והתוצאה:

בדיוק כמו סתם לכתוב את המילים "בניית אתרים זה כיף!" בקוד Html.

סקריפט שמופעל ע"י ארוע

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

הקוד בגוף הדף:

<a href="javascript://" onMouseOver="change()" onMouseOut="changeback()">
<img src="dog.jpg" name="pic">
</a>

מה עשינו כאן? הכנסנו תמונה, כמו שאנחנו יודעים לעשות: <img src="dog.jpg"> ונתנו לה שם: name="pic".

הקפנו את התמונה בתגים של לינק <a></a>, ובכך יצרנו מהתמונה לינק. הקטע הוא, שהלינק הוא לינק מת - הוא לא מוביל לשום מקום: href="javascript://". זה לינק מת בגלל שהיעד שלו הוא javascript, והיעד של ה-javascript הוא // שזאת הערה, כלומר זה לא הולך לשום מקום. שום דבר לא יקרה אם תלחצו על התמונה.

בתוך תגי הלינק אפשר לראות מה קורה כשהעכבר מרחף מעל התמונה, ומה קורה כשהוא כבר לא:

onMouseOver="change()" כשהעכבר על התמונה, הוא מפעיל את onMouseOver, שהוא ארוע (event באנגלית)- הארוע שבו העכבר מרחף על התמונה. והארוע מפעיל את change(), שהיא פונקציה שקודדנו בראש הדף, ועוד רגע נסתכל עליה.

onMouseOut="changeback()" גם כאן יש ארוע שמפעיל פונקציה, באותה הצורה: כשמתרחש הארוע של ירידת העכבר מהתמונה - onMouseOut - מתרחשת הפונקציה changeback().

הקוד בראש הדף, או הפונקציות:

<script type="text/javascript">
<!--
function change()
{
document.images.pic.src="bird.jpg"
}

function changeback()
{
document.images.pic.src="dog.jpg"
}
//-->
</script>

בעצם, אנחנו רואים כאן שתי פונקציות: אחת משנה את התמונה - change() - ואחת מחזירה את המצב לקדמותו - changeback(). כרגע לא נתמקד מדי באיך כותבים פונקציה, רק נראה שבתוך כל פונקציה יש שורה אחת. השורה הזאת משנה את המקור של התמונה, ה-src, ובכך משנה את התמונה.

וכמו שכבר ציינו, הן מופעלות רק כשקוראים להן, כשקורה ארוע, בגלל שהן בראש הדף, בין תגי ה-head.

ארועים נוספים

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

בכל הארועים, התחביר הוא זהה: onEvent="..." - שם הארוע, ומה אמור לקרות כשהארוע מתרחש - בד"כ פונקציה כלשהי.

ראינו שני ארועים - onMouseOver ו-onMouseOut. בואו נראה איזה עוד ארועים חשובים יש, ומה הם עושים:

  • onClick
    לחיצה עם העכבר על האובייקט
  • onDblclick
    לחיצה כפולה של העכבר על האובייקט
  • onLoad
    כשהאובייקט מסיים לעלות - בד"כ מופיע בתוך תג ה-body.
  • onUnload
    כשהאובייקט מוסר מהמסך - בד"כ כשיוצאים מהדף.
  • onSubmit
    כשלוחצים על כפתור ה"שלח" של טופס. הארוע הזה טיפה שונה: הוא משמש לבדיקת תקינות קלט לפני טיפול בטופס, לכן הוא צריך לקבל אישור לפני שהתוכן של הטופס מועבר הלאה. נכתוב:
    onSubmit="return checkform()"
    checkform הוא השם אותו אני בחרתי לתת לפונקציה אליה אנו מפנים את המשימה של בדיקת תקינות הקלט, והיא צריכה להחזיר לנו אישור. בהמשך נלמד איך עושים זאת.
לרישמה מלאה של ארועים, גשו ל:
w3schools

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

חזרה לדף javascript הראשי...