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

סוגי ארועים מובדלים אחד מן השני בעיקר ע"י ה- event handlers שמפעילים אותם. הטבלה הבאה מציגה את : Event handlers האוביקטים שתומכים בהם

הסבר דוגמא נתמכים ע"י מופעלים כאשר Handler
  Image טעינה הופרעה. 1 onAbort
לאחר סימון ה-Checkbox איבוד ה-Focus בלחיצה בכל מקום אחר בדף
<input type="checkbox" 
    onblur="alert('Lost focus!')">
אלמנטים טקסטואלים, חלון, כל האלמנטים האחרים. אלמנט מאבד את פוקוס הקלט. onBlur
בחירת אופציה onChange בחירת ערך מ- select בטופס
<script>
	
function os()
{
  if (document.f1.sel.selectedIndex==1)
    document.bgColor="lightgreen"
  else if (document.f1.sel.selectedIndex==2)
    document.bgColor="seagrean"
  else if (document.f1.sel.selectedIndex==3)
    document.bgColor="sandy brown"
  else if (document.f1.sel.selectedIndex==4)
    document.bgColor="steelblue"
}

</script>

<form name=f1>
  <select name=sel onChange=os()>
   <option>Select background color
   <option>light green
   <option>sea grean
   <option>sandy brown
   <option>steel blue
  </select>
</form>
Select, אלמנטים להכנסת קלט טקסטואלי. משתמש בוחר או מבטל פריט או כותב טקסט ומעביר את פוקוס הקלט לאלמנט אחר. onChange
onClick החלפת הרקע בתמונה שעליה הקלקנו
<script language="JavaScript">

function tile()
{
 var source=event.srcElement
 if (source.tagName=="IMG")
	document.body.background=source.src
}

</script>

 <div onClick="tile()">
  <img src="k51.gif" width=40 height=40>
  <img src="k31.gif" width=40 height=40>
  <img src="k12.gif" width=40 height=40>
  <img src="k14.gif" width=40 height=40>
 </div>
קישור
( link ), אלמנטים של כפתור.
משתמש מקליק פעם אחת. מחזיר ערך false על מנת לבטל פעולת ברירת מחדל. onClick
פתיחת תיבת דו -שיח onDoubleClick בזמן הקלקה פעמיים על הכפתור, נפתחת תיבת דו-שיח.
<script language="JavaScript">

  function testIt()  
  {
    response=prompt ("    ? מה שמך ", "");
    if (response != null)
      alert ("שלום לך " + response + ""); 
  }

</script>

<input type="button" value="double click me"
  onDblClick="testIt()">
מסמכים, קישור, תמונה (image), אלמנטים של כפתור. משתמש מקליק פעמיים. 2 3 4 onDblClick
  תמונה
(image).
מתרחשת שגיאה בזמן טעינת תמונה. 1 onError
ניקוי טופס ב : onFocus ניקוי שדה הטקסט בזמן שהפוקוס נמצא בשדה זה
<script>

function clearText(thefield)
{
  if (thefield.defaultValue==thefield.value)
     thefield.value = ""
} 
</script>

<input type="text" value="Write Here"
	 onFocus="clearText(this)">
אלמנטים טקסטואלים, חלון, כל האלמנטים של טופס. אלמנט מקבל פוקוס להכנסת קלט. onFocus
שינוי צבע הרקע לאדום בלחיצה על מקש,
שינוי צבע הרקע ללבן בשחרור המקש
<input type="text" 
	onkeyDown="document.bgColor='red'"
	onkeyUp="document.bgColor='white'"
>
מסמך, תמונה, קישור, אלמנטים של טקסט. קליד ( key ) נלחץ ע"י משתמש. מחזיר false על מנת לבטל. 2 onKeyDown
מסמך, תמונה, קישור, אלמנטים של טקסט. קליד ( key ) שוחרר ע"י משתמש. 2 onKeyUp
הגבלת כמות תווים onKeyPress הגבלת כמות תווים בטופס, והקפצת alert בזמן הכתיבה תכתבו בטופס יותר מ 20 תווים, יקפוץ לכם בו במקום alert עם הודעה בהתאם .
<script language="JavaScript">

function checkTArea(area) 
{
  if (area.value.length > 20)
    alert("20 :מקסימום תווים");
}

</script>
 
<textarea onkeydown="checkTArea(this)" 
rows=3 cols=20>הקלד כאן</textarea>
מסמך, תמונה, קישור, אלמנטים של טקסט. קליד (key) נלחץ ע"י משתמש. קומבינציה של onKeyDown ו-onKeyUp. 2 onKeyPress
פתיחת חלון נוסף/דף אחר onLoad ברגע הכניסה לדף, הסקריפט מגדיר לו לפתוח חלון נוסף על כל המסך .
<script>

function fullwin()
{
  window.open(
  "yourlink.html","","width=250,height=150")
}

</script>
חלון, תמונה. הסתימה טעינת תמונה או מסמך. onLoad
שינוי ה-source של התמונה בארועים onMouseOver, onMouseOut onMouseDown, onMouseUp
<IMG SRC="out.jpg"
	onmouseover="this.src='over.jpg'"  
	onmouseout="this.src='out.jpg'"
	onMouseDown="this.src='down.jpg'"
	onMouseUp="this.src='over.jpg'"
>
מסמך, תמונה, קישור, אלמנטים של כפתור. משתמש לוחץ על כפתור העכבר. 2 onMouseDown
קישור, תמונה, שכבה.   1 onMouseOut
קישור, תמונה, שכבה. עבור קישורים, מחזיר true על מנת למנוע מה- URL להופיע ב- status bar. onMouseOver
מסמך, תמונה, קישור, אלמנטים של כפתור. משתמש משחרר את כפתור העכבר. 2 onMouseUp
לאחר מילוי שדות הטופס בלחיצה על כפתור "Reset" המשתמש נשאל האם לנקות את שדות הטקסט בטופס
<form action="" onreset="return confirm('
You will have to fill in the form again!\n 
Click OK to reset the form anyway')">

<input type="text" name="firstName">
<input type="text" name="LastName">
<input type="Reset"> 
<input type="submit" value="Send">

</form>
טופס. דרוש reset לטופס. 1 onReset
שנה את הגודל של החלון החדש כדי לראות איך אירוע onResize מפעיל סקריפט.
<script for=window event=onResize>

f=document.forms[0];
f.theWidth.value=window.dialogWidth;
f.theHeight.value=window.dialogHeight;

</script>

<form action="">
width:<input type="text" name="theWidth">, 
height:<input type="text" name="theHeight">
</form>

חלון. חלון משנה את גודלו. onResize
בדיקת מספרים onSubmit מוודא שלטופס הוכנסו רק מספרים, להדגמה נסו לכתוב בטופס אותיות
<script language="JavaScript">

function checkform()
{
 var x=document.f1.pnum.value
 var anum=/(^\d+$)|(^\d+\.\d+$)/
 if (anum.test(x))
 {
   alert("! נהדר ! הוזנו רק מספרים")
   return true
 }
 else
 {
   alert("!הזן מספרים בלבד")
   return false
 }
}

</script>

<form name="f1" onSubmit="return checkform()">
  enter only numbers
  <input type="text" name="pnum"><br><br>
  <input type="submit" value="Submit">
</form>
טופס. דרושה הגשת הטופס. מחזיר false למנוע submission onSubmit 1
פתיחת חלון חדש ביציאה onUnLoad חלון קופץ בעת יציאה מהדף . כשתצאו מדף זה (או כשתעשו רענון) יקפוץ לכם חלון נוסף .
<body 
onunload=window.open(
  'next.html','search','width=280,height=160')>
</body>
חלון. מסמך "מושלך". onUnload


מקרא :

1- חדש ב- 1.1 java script.
2- חדש ב-1.2 java script.
3- לא עובד ב- Unix platforms Navigator 4.
4- לא עובד ב- Macintosh platforms Navigator 4.

לתשומת לבך :
כאשר נכתב בטבלה אלמנטים של כפתור הכוונה היא : כפתור, checkbox, radio, reset, submit object.
כאשר נכתב בטבלה אלמנטים של טקסט הכוונה היא : טקסט, textarea, סיסמא, FileUpload objects.
אינטרנט אקספלורר 4 תומך למעשה בכל סוג ארוע בכל אוביקט HTML.
הטבלה הנ"ל מציגה את קבוצת הארועים הניתנים לשימוש גם באינטרנט אקספלורר וגם ב- Navigator.


במיקרים רבים, event handler משתמש בערך המוחזר על ידו על מנת להצביע על אופי הארוע. לדוגמא, אם משתמשים ב- onSubmit עבור אוביקט טופס כדי לתת לו תוקף ומגלים שהמשתמש לא מילא את כל השדות בטופס, ניתן להחזיר false מה- handler כדי למנוע מהטופס להכנס לתוקף. אם משתמשים ב- onMouseOver עבור קישור להדפסה של מסר מיוחד על גבי שורת המצב, צריך להחזיר true מה- event handler כדי למנוע מהדפדפן לשכתב את ההודעה עם ה- URL של הקישור. עבור event handlers שתומכים בערכים מוחזרים, העמודה השניה בטבלה מצביעה על המשמעות של הערך המוחזר.
2 . סוגי ארועים מיוחדים
בנוסף לארועים שהוזכרו בטבלה בסעיף הקודם קיימים עוד שני סוגי ארועים. למרות שארועים אלו אינם "עוקבים" אחר המודל הסטנדרטי, הם עדיין חלק חשוב של מודל התכנות מבוסס ארועים ש- JS מתבססת עליו.

ארוע ה- timer

ניתן להשתמש במתודות: ( )setTimeout ו- setInterval על מנת שקוד ה- JS יפעל בנקודה מסוימת בעתיד. כאשר קוראים למתודות אלו זה בעצם כתיבת handler שיקרא ע"י המערכת כאשר ארוע מסוים מתרחש. במקרה כזה, הארוע המעניין הוא הקטע של כמות הזמן המוגדר.



ארוע ה- error

בטבלה הנ"ל מצוין ה- event handler : onError עבור אוביקט תמונה.
Handler זה נקרא אם מתרחשת שגיאה בזמן שהתמונה נטענת לתוך הדפדפן. לאוביקט החלון יש גם פונקצית error handler. ע"י הצבה של פונקציה לתכונה onerror של אוביקט החלון, מגדירים פונקצית error handler שנקראת כאשר מתרחשת כל שגיאת JS בחלון זה.
כמו כל event handler, זוהי פונקציה שכותבים ע"י המערכת. המערכת קוראת לפונקציה כאשר ארוע מסוים מתרחש (במקרה זה הארוע הוא שגיאה).
ה- error handler oneror הוא לא כמו event handlers רגילים.
ראשית, הוא לא יכול להיות מוגדר כ-תכונה ב- HTML, אין תכונת HTML onerror כללית שניתן להגדיר.
שנית, כאשר המערכת קוראת ל error handler onerror, היא מעבירה ארגומנטים שאינם מועברים ל- event handlers אחרים.
שלושה ארגומנטים מועברים :
1. מסר המתאר את השגיאה שהתרחשה.
2. מחרוזת הכוללת את ה- URL של המסמך מכילה את קוד JS שגרם לשגיאה.
3. מספר השורה במסמך בה התרחשה השגיאה.

Error handler יכול להשתמש בארגומנטים אלו לכל מטרה.
Error handler טיפוסי ידפיס את מסר השגיאה למשתמש, יתעד זאת במקום מסוים, או יאלץ להתעלם מהשגיאה.

בנוסף לשלושת הארגומנטים, הערך המוחזר מ- onerror handler הוא משמעותי.
כברירת מחדל, המערכת מדפיסה תיבת דיאלוג משלה לשגיאה כאשר מתרחשת שגיאת JS.
אם ה- handler onerror מחזיר true, זה אומר למערכת שה- handler טיפל בשגיאה ואין צורך בפעולות נוספות- במילים אחרות, המערכת אינה צריכה להדפיס את תיבת דיאלוג השגיאה שלה. לכן, אם לדוגמא, לא רוצים שהמשתמשים יוטרדו ע"י הודעות שגיאה, ניתן להשתמש בשורת הקוד הבאה בתחילת התוכנית :
self.onerror = function() { return true; }
3 . event handlers כתכונות HTML
event handlers מבוטאים כערכים של תכונות HTML. כך, לדוגמא, הארוע onLoad יוגדר ע"י תכונת onLoad של התווית <BODY>, והארוע onReset יוגדר ע"י תכונת onReset של התווית <FORM>. הערך של תכונת event handler הוא מחרוזת שרירותית של קוד JS.

event handlers דומים מאוד לפונקציות פרט לשוני קטן אך חשוב: הם פועלים בטווח שונה מהטווח בו פועלות פונקציות.
ל- event handlers שרשרת טווח מורכבת יותר משל פונקציות.
בראש שרשרת הטווח נמצא אוביקט ה- call, וארגומנטים שהועברו ל- event handler מוגדרים כאן, כמו משתנים מקומיים שמוגדרים בגוף ה- event handler.
אחרי אוביקט זה בשרשרת הטווח לא נמצא האוביקט הגלובלי, לעומת זאת, נמצא האוביקט שמפעיל את ה- event handler.
לדוגמא, נניח ומגדירים אוביקט כפתור בטופס HTML ע"י תווית <INPUT>, ואז משתמשים בתכונת onClick כדי להגדיר event handler. אם הקוד עבור ה- event handler משתמש במשתנה בשם form, משתנה זה הוא מוחלט לתכונת ה- form של אוביקט הכפתור.

שרשרת הטווח אינה מסתיימת עם האוביקט שמגדיר ה- handler: היא ממשיכה עם אוביקט הטופס שמכיל את הכפתור, אוביקט המסמך (Document) שכולל את הטופס, ולבסוף אוביקט החלון (האוביקט הגלובלי) שכולל את המסמך. המשך זה נכון לגבי ה- event handler : onClick ולגבי כל אוביקט במודל אוביקט המסמך.
4 . event handlers כתכונות Java Script
בגרסאות 1.1 JS ומעלה, ניתן להגדיר את ה- event handler כפונקציה, ואז להציב אותה לתוך תכונת JS של אוביקט HTML לדוגמא:
<INPUT TYPE=button  NAME=b1 VALUE="Press Me">
event handler עבור כפתור זה יכול לבוא לביטוי ב- HTML :
<INPUT TYPE=button NAME=b1 VALUE="Press Me" onClick=alert('Thanks!');>
או
Document.b1.onClick=funaction() { alert('Thanks!'); }
כל אוביקט JS שמציג אלמנט HTML הינו בעל תכונות המתאימות לתכונות ה-event handler של אלמנט HTML. אם מציבים פונקציה לאחת מתכונות אלו, פונקציה זו משמשת כ- event handler ונקראת באופן אוטומטי ע"י המערכת כאשר הארוע המתאים מתרחש.

ישנן מספר יתרונות לביטוי event handler כתכונות JS .
ראשית, הפחתת השילוב בין קוד HTML ו-JS, קידום המודולריות והניקיון, קוד נוח יותר ל"תחזוק".
שנית, הפונקציות אינן צריכות להיות קבועות מראש, לא כמו תכונות HTML, אשר מהוות חלק סטטי של המסמך ונקבעות רק בזמן יצירת המסמך,תכונות JS יכולות להשתנות בכל זמן.