אירועים (Events) בשפת - Javascript

אירוע (Event) הוא מסר מאובייקט כלשהו שדבר מה השתנה בו, או שדבר מה קרה לו. אירועים ב - Javascript הם בעצם אירועים באלמנטים (אובייקטים) שונים בדף ה - HTML שלנו. מכאן, שעל מנת להבין אירועים ב - Javascript עלינו בעצם להבין מהם אירועים ב - HTML הסביבה שבה שפת  Javascript עובדת.

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

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

דוגמת קוד להצמדת קוד Javascript לאירוע (Event) ובכך להעשיר את חווית המשתמש

<body>
 <input type="button" onclick="MessageBox('Hello World')" value="Click Me" />
</body>

בדוגמה למעלה הצמדנו קוד Javascript לאירוע onclick (באדום בדוגמה שלנו) של כפתור בדף HTML. האירוע onclick מופעל כאשר מישהו מקליק באמצעות העכבר על הכפתור שאותו הגדרנו באמצעות התג <input>.

ביכולתנו גם להוציא את הקוד שברצוננו להריץ מתג ה - HTML ולשים אותו בתוך פונקציה למשל ואז לקרוא לפונקציה מתוך האירוע. למען האמת, דרך זו להריץ קוד Javascript פופולארית יותר ובדרך כלל גם עדיפה.

דוגמת קוד לקריאה מתוך אירוע לפונקצית Javascript

<body>
 <input type="button" onclick="Function_Name" value="Click Me" />
</body>

התחביר להצמדת סקריפט לאירוע

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

הצורה הכללית לכתיבת קוד Javascript ישירות בתוך תג ה - HTML

<tag name ... event name="Put here Javascript code or function name" .../>

 

רשימת האירועים ב - HTML5

onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting

מדריכים נוספים הקשורים לנושא זה

מדריכים ודוגמאות קוד בשפת Javascript

אירועים בשפת HTML5

המדריך לתג input בשפת HTML

 
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש