וובמאסטר - תיכנות ובניית אתרים

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

RiU/‏ 23 אוגוסט, 2003
F+
F-
עברית מטפלי אירועים, אלו בעצם פקודות שמתבצעות ברגע שמשהו קורה, הלחצן בעכבר נלחץ, העכבר זז, הדפדפן סיים להוריד את המסמך, גודל הדף השתנה וכו'..

נתחיל עם העכבר:
מה כבר יכול עכבר לעשות? להלחץ (יש יותר מכפתור אחד), להעזב, להלחץ פעמיים, לזוז, לעבור מעל תגית מסויימת, לצאת ממנה, לבחור טקסט ובטח שכחתי עוד שתיים שלוש אפשרויות... אז נתחיל עם איך רושמים את זה ואיפה. בכל תגית שתבחרו, ולמשל רוצים שהצבע של טקסט מסויים בתגית <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המשתמש עוזב את הדף

כמובן שיש עוד הרבה אבל הרשימה המלאה תבוא רק בהמשך, יש עוד כמה דברים שכדאי ללמוד לפני.
תגיות: JS‏  /  Javascript‏  /  DHTML‏  /  DOM‏  /  Dynamic‏  /  דינמי‏  /  ארוע‏  /  event‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות