מדריך 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 שפשוט מופעלת ברגע שהעכבר זז על המסמך.

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

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