تفاوت‌ Event Bubbling و Event Capturing جاوا اسکریپت

رویداد event capturing و event bubbling چیست؟

تعریف یک خطیش میشه این:

Event bubbling and event capturing are two different event propagation mechanisms in JavaScript

دو روش Event bubbling و Event capturing برای انتشار event در درخت DOM به کار می‌روند، زمانی که یک رویداد روی المانی (element) رخ می‌دهد که در داخل المان دیگری قرار دارد. این دو حرکت رویداد از یک المان هدف به سمت المان های والد و اجداد را توصیف می کنند.

• حباب رویداد Event bubbling: هنگامی که رویدادی روی یک عنصر رخ می‌دهد، ابتدا رویداد را در عنصر هدف ایجاد می کند و سپس به المان های والد و اجداد حباب می‌شود. می توان اینطور گفت که کنترل کننده‌های رویداد در عناصر والد و اجداد نیز فعال می‌شوند.
• ثبت رویداد Event capturing: زمانی که رویدادی روی یک المان رخ می‌دهد، قبل از رسیدن به عنصر هدف، رویداد را ابتدا در اجداد المان هدف آغاز می‌نماید. این به معنی است که ابتدا کنترل کننده‌های المان های اجداد و سپس رویداد بر روی المان هدف فعال می‌شود.

برای مثال در کد زیر:

اگر برای ساختار html بالا از رویداد click event listener استفاده کنیم، برای ایجاد Event bubbling خواهیم داشت:

با این حساب اگر شما روی دکمه کلیک کنید، رویدادها به سمت اجداد حباب می‌شوند و event listener به ترتیب زیر فعال می‌گردد:

1. Button clicked!
2. Inner div clicked!
3. Outer div clicked!

رویداد از دکمه شروع و تا بیرونی ترین المان حباب می‌شود.

از طرف دیگر برای Event capturing داریم:

در ثبت رویداد یا event capture از بیرونی ترین المان شروع می‌شود و سپس قبل از رسیدن به المان هدف، از طریق فرزندان به پایین حرکت می‌کند.

با فعال نمودن پارامتر true در این حالت اگر بر روی دکمه کلیک کنید، رویدادها به صورت نزولی ثبت می‌شوند ترتیب فعال شدن event listener به صورت زیر است:

1. Outer div clicked!
2. Inner div clicked!
3. Button clicked!

در event capturing رویداد از بیرونی ترین المان شروع می‌شود و به المان هدف می‌رسد.

سخن پایانی

به‌طور پیش‌فرض، انتشار رویداد در جاوا اسکریپت از مکانیسم حباب‌سازی رویداد event bubbling پیروی می‌کند. با تعیین پارامتر true در event listener می‌توانیم از مکانیزم ثبت رویداد یا event capturing استفاده نماییم.