Event Bubbling چیه؟

یک راه برای گسترش یک رویداد توی یک DOM هست. کد HTML زیر رو در نظر بگیرید:

<div id="div">
    <p id="p"></p>
</div>

حالا می‌خوام به تگ‌های div و p یک مدیریت‌کننده رویداد onclick ضمیمه کنم:

document.querySelector('div')
  .addEventListener('click', function() {
    alert("I'm a div");
  });

document.querySelector('p')
  .addEventListener('click', function() {
    alert("I'm a p!");
  });

برای اجرا کردن این کد اینجا رو ببینید. وقتی این کد رو اجرا و روی تگ p کلیک کنیم، دو تا alert می‌گیریم. اولی پیغام "I'm a p" و سپس پیغام "I'm a div". این یعنی رویداد ابتدا از تگ داخلی که p باشه گسترش پیدا کرده به سمت بیرون. به بیان ساده:

گسترش پیدا کردن رویداد توی این روش از المنت داخلی به سمت المنت بیرونی هست.

این حالت از گسترش رویداد، حالت پیشفرض هست. چرا اسمش Bubbling هست؟‌ Bubble یعنی حباب. حباب‌ها هم معمولا از داخل بزرگ میشن به سمت بیرون.

منبع: