שם: whtyuwymzyor.png צפיות: 38 גודל: 42.3 קילובייט
הקדמה
בשיעור הקודם למדנו מספר דברים:
  • הפקודה "continue".
  • ערכים בוליאניים.
  • משפטי "switch".
מתחילים

אירועים
אירועים (events), הם דבר מובנה ב-JS ויש לשים את זה בתג.
האירועים עוזרים לנו לזהות הרבה מאוד דברים. כמו לדוגמא אם העכבר עבר מעל קישור, מתי הוא ייצא ממנו, מתי הוא לוחץ על העכבר ועוד.

להלן הרשימה המלאה לכל האירועים:
שם האירוע למה משמש
onabort המשתמש עוצר טעינת תמונה.
onblur המשתמש מעביר את הפוקוס מדבר אחד לאחר.
לדוגמא, לחצנו על תיבת טקסט אחת ושלחצו על אחרת אז מתרחש האירוע, כאשר אנו יוצאים משדה מסומן.
onchange אובייקט שמאבד מיקוד נבדק, כדי לדעת אם חל שינוי בערכו ההתחלתי,
ואז מופעל ההדק.
onclick כאשר מתבצעת לחיצה.
ondblclick כאשר מתבצעת לחיצה כפולה.
onerror שגיאה בקוד.
onfocus ההפך מ-onblur, כאשר אובייקט מקבל מיקוד.
onload לאחר טעינת הדף. נמצא רק בתגית body.
onmouseout יציאת העכבר מתחום האובייקט.
onmouseover כאשר סמן העכבר עובר על האובייקט.
onmouseup שחרור לחיצת העכבר לאחר שנלחץ מטה.
onmousedown לחיצת עכבר.
onunload יציאה מהדף.

השימוש באופציות חייב לבוא כך:
קוד HTML:
<TagName functionName="">Smothing to write</TagName>
TagName
שם התג.
functionName
שם הפונקציה, onunload, onblur וכ'ו.
=""
בדיוק כמו המאפיין style ב-CSS, בין הגרשיים ( " ) נרשום את קוד ה-JS שנרצה שיעשה כאשר האירוע מתבצע.

להלן שימוש בכל האופציות שנרשמו:
onabort
קוד HTML:
<img onabort="alert('Abort!')" alt="My New Home!" src="Home.jpg" />
וכאשר נעצור את התמונה נקבל הודעה קופצת שבה רשום:
Abort!
onblur
קוד HTML:
<input type="text" onblur="alert('Blur!')" />
נסו ללחוץ על התיבת טקסט ולאחר מכן ללחוץ על מקום ריק בדף, מה שייצא זה הודעה קופצת שבה רשום:
Blur!
onchange
קוד HTML:
<select onchange="alert('Change!')">        <option>Yes</option>        <option>No</option>    </select>
נסו לשנות ערך, מה שייצא זה הודעה קופצת שבה רשום:
Change!
onclick
קוד HTML:
<p onclick="alert('Click!');">A paragraph</p>
נסו ללחוץ על הפסקה, מה שייצא זה הודעה קופצת שבה רשום:
Click!
ondblclick
קוד HTML:
<p ondblclick="alert('Double click!');">A paragraph</p>
נסו ללחוץ קליק כפול (כמו שפותחים קובץ שנמצא על המחשב) על הפסקה, מה שייצא זה הודעה קופצת ובה רשום:
Double click!
onfocus
קוד HTML:
<input type="text" onfocus="alert('Focus!')" />
נסו ללחוץ על תיבת הטקסט, מה שייצא זה הודעה קופצת ובה רשום:
Focus!
onload
האפשרות הזאת עובדת רק בתגית body!
קוד HTML:
<body onload="alert('Load!')">
תעשו רענן, מה שייצא זה הודעה קופצת ובה רשום:
Load!
onmouseout
קוד HTML:
<p onmouseout="alert('Mouse Out!');">A paragraph</p>
נסו להעביר את סמן העכבר מעל הקטע טקסט והזיזו אותו. איך שתזיזו יהיה תיבת טקסט ובה רשום:
Mouse Out!
onmouseover
קוד HTML:
<p onmouseover="alert('Mouse Over!');">A paragraph</p>
נסו להעביר את סמן העכבר מעל לטקסט. מה שייצא זה הודעה קופצת ובה רשום:
Mouse Over!
onmouseup
קוד HTML:
<p onmouseup="alert('Mouse Up!');">A paragraph</p>
לחצו על הקטע טקסט. אל תעזבו את הלחצן עדיין. כאשר תעזבו את הלחצן תיווצר הודעה קופצת ובה רשום:
Mouse Up!
onmousedown
קוד HTML:
<p onmousedown="alert('Mouse Down!');">A paragraph</p>
כאשר תלחצו על הקטע טקסט תיווצר הודעה קופצת ובה רשום:
Mouse Down!
onunload
את המאפיין הבא יש לשים רק בתגית ה-body.
קוד HTML:
<body onunload="alert('Unload!')">
וכאשר נסגור את החלון או נלחץ על F5, נקבל הודעה קופצת ובה רשום:
Unload!
הפונקציה onunload לא עובדת בגוגל כרום ובאופרה.
  • בדוגמאות שלפניכם עשיתי רק הודעות קופצות. כל דבר אפשר לעשות!
  • לא חובה לעשות רק על תג "p" את האירועים, אפשר לעשות על כל תג. חוץ מ-onload ו-onunload, שהם צריכים להיות בתגית ה-body.