שיטת addEventListener () - קוד לדוגמא למאזין לאירועים ב- JavaScript

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

הבנת אירועים ומטפלים באירועים

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

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

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

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

JavaScript מספק מטפל באירועים בצורה של addEventListener()השיטה. ניתן לצרף מטפל זה לרכיב HTML ספציפי שברצונך לפקח עליו על האירועים, ולרכיב יכול להיות צמוד יותר ממטפל אחד.

תחביר addEventListener ()

הנה התחביר:

target.addEventListener(event, function, useCapture) 

• יעד : אלמנט ה- HTML שאליו ברצונך להוסיף את מטפל האירועים שלך. אלמנט זה קיים כחלק ממודל אובייקט המסמך (DOM) וייתכן שתרצה ללמוד כיצד לבחור רכיב DOM.
• אירוע : מחרוזת המציינת את שם האירוע. כבר הזכרנו loadואת clickהאירועים. לסקרנים, הנה רשימה מלאה של אירועי DOM ב- HTML.
• פונקציה : מציין את הפונקציה להפעלה בעת זיהוי האירוע. זה הקסם שיכול לאפשר לדפי האינטרנט שלך להשתנות באופן דינמי.
• useCapture : ערך בוליאני אופציונלי (נכון או לא נכון) המציין אם יש לבצע את האירוע בשלב הצילום או המבעבע. במקרה של אלמנטים מקוננים של HTML (כגון imgבתוך a div) עם מטפלי אירועים צמודים, ערך זה קובע איזה אירוע יבוצע קודם. כברירת מחדל, הוא מוגדר כ- false, כלומר המטפל באירועי ה- HTML הפנימי ביותר מבוצע תחילה (שלב מבעבע).

addEventListener () דוגמת קוד

זו דוגמה פשוטה שהכנתי שמראה לך addEventListener()בפעולה.

כאשר משתמש לוחץ על הכפתור, מוצגת הודעה. לחיצה נוספת על כפתור מסתירה את ההודעה. הנה JavaScript הרלוונטי:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

עובר לפי התחביר שהוצג קודם לכן עבור addEventListener():

• יעד : אלמנט HTML עםid='button'
• פונקציה : פונקציה אנונימית (חץ) המגדירה קוד נחוץ לחשיפת / הסתרת ההודעה
• useCapture : שמאל לערך ברירת המחדל שלfalse

הפונקציה שלי מסוגלת לחשוף / להסתיר את ההודעה על ידי הוספה / הסרה של מחלקת CSS הנקראת "גילוי" המשנה את הנראות של אלמנט ההודעה.

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

העברת האירוע כפרמטר

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

דוגמה זו מראה כיצד ניתן להשיג את מזהה האלמנט:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

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

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

הסרת מטפלים באירועים

אם מסיבה כלשהי אתה כבר לא רוצה שמפעיל אירועים יופעל, כך תסיר אותו:

target.removeEventListener(event, function, useCapture); 

הפרמטרים זהים ל- addEventListener().

תרגול מביא לשלמות

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

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

בכיף ולך להכין משהו מדהים!

לקבלת ידע נוסף לפיתוח אתרים ידידותי למתחילים, בקר בבלוג שלי בכתובת 1000 Mile World ועקוב אחרי בטוויטר.