JS תומכת במספר סוגי ארועים שונים. סוגי ארועים שונים נוצרים בנסיבות שונות.
הארוע שנוצר כאשר המשתמש מקליק על כפתור שונה מהארוע שנוצר כאשר דפדפן טוען מסמך חדש.
אוביקטים שונים יכולים גם כן ליצור ארועים באופן שונה בנסיבות זהות או דומות. כאשר מקליקים ע"י העכבר על כפתור נוצר ארוע onClick,
בעוד שמקליקים ע"י העכבר על אלמנט טקסטואלי לא נוצר ארוע כלל.
סוגי ארועים מובדלים אחד מן השני בעיקר ע"י ה- event handlers שמפעילים אותם.
הטבלה הבאה מציגה את : Event handlers האוביקטים שתומכים בהם
הסבר
דוגמא
נתמכים ע"י
מופעלים כאשר
Handler
Image
טעינה הופרעה.
1 onAbort
לאחר סימון ה-Checkbox איבוד ה-Focus בלחיצה בכל מקום אחר בדף
<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, אלמנטים להכנסת קלט טקסטואלי.
משתמש בוחר או מבטל פריט או כותב טקסט ומעביר את פוקוס הקלט לאלמנט אחר.
עבור קישורים, מחזיר 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 מפעיל סקריפט.
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!');>
כל אוביקט JS שמציג אלמנט HTML הינו בעל תכונות המתאימות לתכונות ה-event handler של אלמנט HTML.
אם מציבים פונקציה לאחת מתכונות אלו, פונקציה זו משמשת כ- event handler ונקראת באופן אוטומטי ע"י המערכת כאשר הארוע המתאים מתרחש.
ישנן מספר יתרונות לביטוי event handler כתכונות JS .
ראשית, הפחתת השילוב בין קוד HTML ו-JS, קידום המודולריות והניקיון, קוד נוח יותר ל"תחזוק".
שנית, הפונקציות אינן צריכות להיות קבועות מראש, לא כמו תכונות HTML,
אשר מהוות חלק סטטי של המסמך ונקבעות רק בזמן יצירת המסמך,תכונות JS יכולות להשתנות בכל זמן.