הבנת הפצת אירועים ב-JavaScript

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

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

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

מהו טיפול באירועים ב-JavaScript?

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

שקול את הדוגמה הזו:

לחץ עלי

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

מהו הפצת אירוע?

הפצת אירוע מתארת ​​את הסדר שבו עוברים האירועים דרך ה- עץ DOM כאשר דפדפן האינטרנט יורה אותם.

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

ישנם שני סוגי ריבוי:

1. בועת אירוע, שבאמצעותה מבעבעים אירועים כלפי מעלה, מילד להורה.
2. לכידת אירועים, שבאמצעותה נוסעים אירועים כלפי מטה, מהורה לילד.

מה זה בועת אירועים ב-JavaScript?

בועת אירוע פירושה שכיוון התפשטות האירוע יהיה מהאלמנט הבן לאלמנט האב שלו.

שקול את הדוגמה הבאה. יש לו שלושה אלמנטים מקוננים: div, טופס וכפתור. לכל אלמנט יש א נְקִישָׁה מאזין אירועים. הדפדפן מציג עֵרָנִי עם הודעה כאשר אתה לוחץ על כל רכיב.

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

 div


 טופס 



 לַחְצָן

מה זה לכידת אירועים?

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

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

 div.addEventListener("click", ()=>{
 alert("div")
 }, נָכוֹן);
 form.addEventListener("click", ()=>{
 alert("טופס")
 }, נָכוֹן);
 button.addEventListener("click", ()=>{
 התראה("לחצן")
 }, נָכוֹן);

כיצד ניתן למנוע התפשטות אירועים?

אתה יכול להפסיק את הפצת האירועים באמצעות stopPropagation() שיטה. ה addEventListener() השיטה מקבלת שם אירוע ופונקציית מטפל. המטפל לוקח אובייקט אירוע כפרמטר שלו. אובייקט זה מכיל את כל המידע על האירוע.

כאשר אתה מפעיל את stopPropagation() השיטה, האירוע יפסיק להתפשט מאותה נקודה. לדוגמה, כאשר אתה משתמש stopPropagation() באלמנט הטופס, אירועים יפסיקו לבעבע עד ל-div. אם תלחץ על הכפתור, תראה אירועים שהועלו בלחצן ובטופס, אך לא ב-div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 alert("טופס");
});

קָשׁוּר: גיליון ה-JavaScript האולטימטיבי

ל-JavaScript יש הרבה כוח מתחת למכסה המנוע

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

אם אתה רוצה ללמוד לקוד JavaScript כמו מקצוען, עיין במדריך שלנו ל-Clever-One liners ולהתכונן ל-Wow בראיון הבא שלך.

11 JavaScript One Liners שכדאי להכיר

השג הרבה רק עם מעט קוד באמצעות מגוון רחב זה של JavaScript one-liners.

קרא הבא

על הסופר