בועת אירועים וכיבוש אירועים ב- JavaScript: כל מה שאתה צריך לדעת

בועת אירועים וכיבוש אירועים הם המונחים הנפוצים ביותר ב- JavaScript בזמן זרימת האירוע. אלה שתי הדרכים להפצת אירועים ב- HTML DOM API. מאמר זה בנושא בועת אירועים וכיבוש אירועים ב- JavaScript יתאר בפירוט מדוע אנו דורשים אלה ב ברצף הבא:

• • • מהי בועת אירועים ב- JavaScript?
    • מהו הפצת אירועים?
    • מהי לכידת אירועים?
    • שימוש בבעבועות אירועים ולכידת אירועים ב- JavaScript
    • תהליך עבודה

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

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

מצא מספר מקסימאלי במערך Java

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

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

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

אם תלחץ על תמונה כלשהי אז היא לא רק תיצור אירוע קליק אלא היא עוברת להורה 'a' וסבא 'li'. בדרך זו התפשטות הפונקציה מתרחשת. כאן התמונה נחשבת כילד והיא יעד האירוע בו נוצר הקליק. הדימוי יחד עם אבותיו יחד מהווה את הענף במינוח עץ. הענף חשוב כשאנחנו מכירים את הדרך שלאורך האירוע מתפשט.

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

1. שלב הלכידה: מעבר מהחלון לשלב יעד האירוע.
2. שלב היעד: זהו שלב היעד.
3. שלב הבועות: מההורה היעד לאירוע בחזרה לחלון.

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

בשלב זה נקראים המאזינים המצפים שערכם נרשם כ'אמיתי '. זה כתוב כ:

el.addEventListener ('לחץ', מאזין, נכון)

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

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

שימוש בבעבועות אירועים ולכידת אירועים ב- JavaScript

בשלב המבעבע נקרא רק הלא-קפטן, כלומר האירועים בעלי ערך הדגל כ- 'שקר'. מבעבע אירועים וכיבוש אירועים הם מאוד שימושיים וחשובים במינוח DOM (Document Object Model).

el.addEventListener ('קליק', מאזין, שקר) // המאזין לא תופס el.addEventListener ('קליק', מאזין) // המאזין לא לוכד

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

מבעבע אירועים אינו פועל בכל סוגי האירועים, אולם על המאזין להחזיק '.בּוּעָה ”רכוש בוליאני של אובייקט האירוע. חלק מהמאפיינים האחרים כוללים:

1. e.target: המתייחס ליעד האירוע.
2. e.currentTarget: זהו המצב בו רשומים המאזינים הנוכחיים. כאן הערך מופנה באמצעות זֶה מילת מפתח.
3. e.eventPhase: זהו מספר שלם המתייחס לשלוש מילות מפתח אחרות כגון לכידה_שלב, מבעבע_שלב, AT_Target שלב.

תהליך עבודה

הבה נבחן מקרוב באיור לעיל. תן לנו ללחוץ על אלמנט 'buttonOne' ואז מיד יופעל אירוע. בדרך כלל אירוע מתחיל את דרכו מהשורש שהוא האלמנט העליון ביותר של העץ. ואז הוא עובר בעקבות העץ את אירוע היעד שהוא 'buttonOne'. כך זה נוסע:

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

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

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

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

בכך הגענו לסוף המאמר שלנו. אני מקווה שהבנתם מה זה בועת אירוע וכיבוש אירועים ב- JavaScript.

כעת, כשיודעתם על בועת אירועים וכיבוש אירועים ב- JavaScript, עיינו ב מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות של 'בועת אירועים וכיבוש אירועים ב- JavaScript' ונחזור אליך.