Get Adobe Flash player
דף הבית אירועים

שפת JavaScript הינה שפה "מונחית אירועים".

"אירוע" הוא פעולה בדף, ששפת ה JavaScript יכולה לזהות ולתרגם כהוראה לביצוע.

כל אלמנט בדף ה HTML, יוצר אירוע וכל אירוע כזה יכול לגרום להפעלת קוד.

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

דוגמאות לאירועים:

  • לחיצת עכבר
  • טעינת תמונה או עליית דף HTML
  • תנועת עכבר מעל "נקודה חמה" בדף
  • בחירת שדה טקסט בטופס
  • שליחת טופס
  • הקשה על המקלדת

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

בדף זה נציג מספר מסויים של אירועים:

א. אירועים הקשורים לטעינת דף

onLoad, onUnload

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

שתי התכונות, onLoad ו- onUnload משמשות לרוב לצורך הכנת cookies שיופעלו עם כניסת ויציאת הגולש מהאתר. למשל, תוכל לפתוח חלון (popup) מייד עם הכניסה הראשונה לאתר, לבקש את שם הגולש, ואז בכניסות הבאות, להוסיף לדף את הטקסט "ברוך הבא פלוני אלמוני".

ב. אירועים הקשורים לעבודה עם טופס HTML

onFocus, onBlur, onChange

שלושה אירועים המנוצלים לצורך טיפול בטופס HTML. אירועים אלה נוצרים בעת שהגולש פונה אל תיבות טקסט (Input) מסוג טקסט, סיסמא או TextArea או אל תיבה משולבת (select).

onFocus

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

<html>
<body>
<script type="text/javascript">
<!--
function EnterToField()
{
alert("הסמן נכנס לשדה");
}
// -->
</script>
<input type="text" name="field" onfocus="EnterToField()">
</body>
</html>

onBlur

אירוע זה דומה לאירוע onFocus בהבדל אחד: הוא יוצר את האירוע בעת שהסמן יוצא מהשדה. בין אם באמצעות לחיצת עכבר במקום כלשהו או במעבר טאב.

onChang

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

<html>
<body>
<script type = "text/javascript" >
<!--
function WhatWord(form)
{
var input= "";
input= document.sam.field.value;
alert("בחרת לכתוב את המילה: " + input); }
// -->
</script> <form name= "sam">
<input type = "text" name ="field" onfocus="WhatWord(form)">
</form>
</body>
</html>

ג. אירועים הקשורים בעבודת העכבר

onMouseOver, onMouseOut

שני אירועים הקשורים לתנועת העכבר. onMouseover נוצר עם מעבר העכבר על האובייקט ו- onMousaeout נוצר בעת יציאת העכבר מהאובייקט.

דוגמא:

<body>
<span onmouseover= "alert('עברת מעל הטקסט המזהיר שלא לעבור')" color= "#ff0000">
אין מעבר </span>
</body>

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

onClick, onDblclick, onmousedown, onmouseup

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

onClick - לחיצה ושחרור מהיר על העכבר

onDblclick - הקלקה כפולה על העכבר

onmousedown - בעת ירידת לחצן העכבר

onmouseup - בעת עליית לחצן העכבר

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