یکی از موضوعاتی که درکش کمی مشکل هست برای دانشجویان، مفهوم “bubbling” و نحوه عملکرد event ها در جاوا اسکریپت هست.
Bubbling در جاوا اسکریپت
فرض کنید لیستی داریم و یک رویداد کلیک لیسنر برای li ها و یک رویداد لیسنر دیگه برای ul ایجاد کردیم. زمانی که روی li کلیک کنیم، به صورت اتوماتیک رویداد ul که parent مربوط به li ها هست نیز اجرا می شود که به این حالت bubbling گفته می شود.
برای جلوگیری از این اتفاق در رویدادهای li ها از متد stopPropagation استفاده می کنیم.
list.forEach(lst=>{
lst.addEventListener('click', (e) =>{
console.log(e.target);
e.target.style.color = 'white';
lst.classList.add('content');
console.log('LI is LIIII');
e.stopPropagation();
});
امیدوارم با این تعریف و مثال ساده مفهوم Bubbling در جاوا اسکریپت را متوجه شده باشید، اگر هنوز ابهام و یا سوالی دارید در بخش نظرات پایین همین صفحه سوالتون رو مطرح کنید.
