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

אנחנו רוצים לאפשר לאלמנטים שלנו להגיב לאירועים. 

מה זה אירוע?

במילים פשוטות – אירוע זה כל פעולה/סיטואציה שקורית במציאות, שאנחנו בוחרים להתייחס אליה.

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

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

יש 2 אפשרויות שבהם אפשר להגדיר אירועים שהאלמנט ׳יאזין׳ להם. 

דרך א׳ – הוספת תכונה לתגית של האלמנט בעת היצירה. 

דרך ב׳ – דרך הג׳אווהסקריפט להגדיר אירוע חדש.

באיזה דרך נבחר? זה כמובן תלוי באירוע. 

אם זה אירוע שאנו רוצים שהוא תמיד יתבצע – נגדיר לרוב בדרך הראשונה. 

אם זה אירוע שיכול להיות שהוא יפסיק מתי שהוא – נגדיר דרך הג׳אווהסקריפט. 

נתחיל ב2 דוגמאות פשוטות: 

דוגמא א׳ – לחיצה

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