מדריך DHTML – מטפלי ארועים

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

נתחיל עם העכבר:
מה כבר יכול עכבר לעשות? להלחץ (יש יותר מכפתור אחד), להעזב, להלחץ פעמיים, לזוז, לעבור מעל תגית מסויימת, לצאת ממנה, לבחור טקסט ובטח שכחתי עוד שתיים שלוש
אפשרויות… אז נתחיל עם איך רושמים את זה ואיפה. בכל תגית שתבחרו, ולמשל רוצים שהצבע של טקסט מסויים בתגית <h1> תשתנה ברגע שלוחצים נכתוב:

<h1 onClick="style.color='blue'">Text</h1> 

הערה:
כדי לדעת איזה לחצן נלחץ יש ליצור פונקציה ולבדוק בעזרת if את הערך של: event.button, כפתור שמאלי זה – 1, ימני – 2, גלגלת – 3. אגב, לא לשכוח שבעכברים המתקדמים יותר יש יותר לחצנים..

אם למשל אנחנו רוצים שכל פעם שהצבע של הטקסט ישתנה ברגע שהעכבר עובר עליו נעשה:

<h1 onMouseover="style.color='blue'" onMouseout="style.color='black'">
	Mouse over me!
</h1> 

עכשיו נגרום לכך שכשלוחצים על תמונה מסויימת ישתנה ה-SRC שלה, כלומר התמונה משתנה ברגע שהעכבר לחוץ וברגע שעוזבים אותו התמונה משתנה בחזרה:

<img id="pic" onMousedown="pic.src='alt.jpg'" onMouseup="pic.src='org.jpg'">

אפשר להשתמש גם ב-onMousemove בתגית ה BODY שפשוט מופעלת ברגע שהעכבר זז על המסמך.

רשימת מפעילים:

onAbort המשתמש עצר את הורדת הדף (stop/abort)
onBlur המשתמש עזב את האובייקט
onChange המשתמש שינה ערך של אובייקט
onClick המשתמש לחץ על אובייקט
onDblClick המשתמש לחץ על האובייקט פעמיים (דאבל קליק)
onFocus המשתמש הפך את האובייקט לפעיל(כמו סימון עם טאב)
onKeyDown מקש כלשהוא במקלדת יורד, כלומר עוד לא נלחץ עד הסוף
onKeyPress מקש כלשהוא במקלדת נלחץ
onKeyUp מקש במקלדת נעזב
onLoad הדפדפן סיים להוריד את המסמך
onMouseDown המשתמש לחץ על כפתור העכבר
onMouseMove העכבר זז
onMouseOver העכבר זז מעל אובייקט
onMouseOut העכבר זז מחוץ לאובייקט
onMouseUp המשתמש עזב את הלחצן של העכבר
onReset המשתמש איפס את הערכים בטופס
onSelect המשתמש בוחר (high-light) טקסט במסמך
onSubmit המשתמש שלח טופס
onUnLoad המשתמש עוזב את הדף

כמובן שיש עוד הרבה אבל הרשימה המלאה תבוא רק בהמשך, יש עוד כמה דברים שכדאי ללמוד לפני.

תגיות: , , , , , , ,

תגובות בפייסבוק