حباب رویداد – جامعه dev

هنگامی که شما با یک عنصر HTML که یک شنونده رویداد به آن متصل است ، تعامل دارید ، این رویداد از طریق عناصر والدین خود (در بیشتر موارد) پخش می شود.
ابتدا این رویداد بر روی عنصر هدف اجرا می شود و سپس درخت DOM را پخش می کند. به این انتشار رویداد می گویند.

کدام رویدادها تبلیغ نمی شوند؟

برخی از رویدادها مانند focusبا mouseenterبا mouseleave تبلیغ نکنید برای دیدن لیست کامل می توانید در W3 بررسی کنید.

چگونه کار می کند؟

برای درک صحیح چگونگی انتشار انتشار رویداد ، من آن را بهتر نشان خواهم داد.
ساختار واکنش زیر را تصور کنید

<div
  onClick={() => closeSection()}
  className="flex flex-col inset-0 bg-black/60 justify-center items-center"
>
  <div onClick={(e) => e.stopPropagation()}>
    <button onClick={() => doSomething()}>Some textbutton>
  div>
div>

رفتار

اگر روی دکمه کلیک کنیم ، این رویداد از طریق عناصر والدین خود پخش می شود تا اینکه به سطح سند برسد.
با دانستن این رفتار می توانیم از آن به نفع خود استفاده کنیم. کد ارائه شده در بالا مانند یک معین عمل می کند و رفتار مورد نظر این است که وقتی
کاربر در خارج از DIV کلیک می کند که حاوی دکمه ای است که معین بسته می شود.

به دلیل انتشار رویداد کلیک ، رفتار یک نزدیکی صاف برای معین انجام می شود. هنگامی که این رویداد توسط button تابع doSomething() اجرا می شود و انتشار پس از رسیدن به والدین مستقیم DIV به دلیل آن متوقف می شود stopPropagation() روش نامیده می شود.

توقف یک رویداد با رویداد را با رویداد متوقف کنید.

فراخوانی event.stopPropagation() از بروز یک واقعه در درخت DOM جلوگیری می کند و از رسیدن آن به عناصر والدین جلوگیری می کند. این برای جلوگیری از رفتارهای ناخواسته یا درگیری در یک برنامه مفید است. با این حال ، فقط باید در صورت لزوم مورد استفاده قرار گیرد ، زیرا استفاده بیش از حد می تواند مدیریت رویداد را سخت تر کند.

حباب رویداد چیست؟

سه مرحله پردازش رویداد در JavaScript وجود دارد و اگرچه این مقاله فقط در مورد مرحله حباب صحبت خواهد کرد ، خوب است بدانید که سه مرحله وجود دارد:

1. ضبط – این رویداد برای رسیدن به هدف رویداد از درخت DOM پایین می رود
2. هدف – هدف رویداد به دست می آید
3. حباب – این رویداد درخت DOM را پخش می کند

در نمودار زیر می بینیم که چگونه یک رویداد از عنصر داخلی (کودک) به بیرونی ترین عنصر (والدین) در درخت DOM پخش می شود.

اکنون که ما در مورد حباب رویداد بحث کرده ایم ، بیایید دو ویژگی اصلی را که اغلب هنگام رسیدگی به رویدادهای حباب استفاده می شود ، کشف کنیم: event.target وت event.currentTargetبشر

تفاوت بین رویداد. target و event.currentTarget

درک تفاوت بین Event.Target و Event.CurrentTarget هنگام کار با نمایندگان پیچیده رویداد یا شنوندگان رویداد تو در تو بسیار مهم است.
برای صحبت در مورد این موضوع از کد زیر استفاده خواهیم کرد:

const handleClick = (event) => {
  // Logs the element that triggered the event
  console.log(event.target);

  // Logs the element that is the handler of the event
  console.log(event.currentTarget);
};

<form onClick={handleClick}>
  <p>Event bubbling in JavaScriptp>
  <button>Clickbutton>
form>;

بیایید تصور کنیم که ما روی عنصر دکمه داخل فرم کلیک می کنیم. این رویداد حباب می شود و در پایان به پایان می رسد onClick کنترل کننده در .