כמעט כל אחד נתקל בבעיה שנגרמת בשל תכונת הבעבוע (bubbling) של JavaScript. אם יש לנו אלמנט A שנמצא בתוך אלמנט B ואנו לוחצים על אלמנט A, הלחיצה נחשבת גם על אלמנט B ותחשב כאירוע (גם) של אלמנט B. בעוד שבדרך כלל bubbling הוא דבר רצוי, לעתים הוא עלול לעורר בעיות, במיוחד אם שני האלמנטים משמשים לדברים אחרים.
בואו וניקח כדוגמא שני אלמנטים חביבים. הראשון הוא div שצבעו אפור ובתוכו (הס פן תעיר) יש div שצבעו ירוק:
וכך נראה ה-HTML שלהם. פשוט ביותר:
<div id="MyElementA" style="background-color: gray; clear: both; height: 200px; width: 200px;">
Element A
<div id="MyElementB" style="background-color: green; height: 100px; width: 100px; ">
Element B
</div>
</div>
נניח ואני רוצה ליצור שני אירועים. אירוע לחיצה עבור אלמנט A (שיגרור הופעת alert) ואירוע לחיצה עבור אלמנט B (שיגרור הופעת alert מסוג אחר לגמרי). עם jQuery זה אמור להיות קל ופשוט:
$(document).ready(function() {
$('#MyElementA').click(function() {alert('A Is activated'});
$('#MyElementB').click(function() {alert('B Is activated'});
});
אבל אם ננסה להפעיל את הקוד החביב שלנו, נגלה שלחיצה על B מפעילה גם את ה-alert של A!
זה קורה בגלל ה-bubbling. לחיצה על B מפעילה את כל האירועים הקשורים ללחיצה על A. ברוב המקרים זה לא מפריע לנו (וגם עוזר) אבל במקרה הזה זה בעייתי.
השאלה היא איך למנוע את זה? אם אני אדע בדיוק על מה אני לוחץ, אז אני יכול להשתמש במשפט תנאי פשוט. השאלה היא איך לדעת. כמובן שאפשר להתחיל לחשב את מקומו של העכבר ולשבור את הראש אבל למה לנו כאשר jQuery, כאשר אנו משתמשים ב-bind, מעבירה לנו אובייקט שבו יש פרטים רבים כולל סוג האלמנט שאנו לחצנו עליו? שימוש באובייקט יעזור לנו לכתוב משפט תנאי פשוט שיפריד בין סוגי הלחיצות.
איך עושים את זה?
$('#MyElementA').bind('click', function(event)
{
if ($(event.target).is('#MyElementA'))
{
alert('A Is activated');
}
if ($(event.target).is('#MyElementB'))
{
alert('B Is activated');
}
});
וכך זה נראה, נסו ותהנו!
איך זה עובד? פשוט ביותר, jQuery מאפשרת לי להעביר אובייקט (event) שבו יש מידע על… האירוע. חלק מהמידע הזה הוא מה היעד (target) של הלחיצה ובכך אני יכול לשים משפט תנאי שמורה לעשות פעולה אחת כאשר ה-target הוא אלמנט A ופעולה שניה כאשר ה-target הוא אלמנט B.
ותודה לשלומי צדוק על הרעיון.