گرفتن حباب انتشار رویداد در جاوا اسکریپت ;)

در حین صحبت در مورد مفاهیم اصلی جاوا اسکریپت، در حین کار با توسعه UI، “انتشار رویداد” یکی از مهمترین موضوعات است.
در این مقاله به بررسی مفهوم Event Propagation- Bubbling، Capturing و Delegation می پردازیم.

بیایید یک UI ساده را فرض کنیم، که در آن یک DIV داریم، در داخل آن “DIV” یک “FORM” وجود دارد و در آن شکل یک “BUTTON” نیز وجود دارد.

حالا اجازه دهید یک کد جاوا اسکریپت ساده بنویسیم که EVENT LISTENERS را به تمام آن سه تگ یعنی div، form & button اضافه می کند.

1. حباب: همانطور که از نام آن پیداست مانند حباب ها، رویدادها از پایین به بالا حرکت می کنند. مطابق کد JS بالا، با کلیک بر روی هر مورد، برچسب نام آن به عنوان یک هشدار نشان داده می شود.

eventBubbling توسط Rounit Sinha (codepen.io)

بنابراین، اکنون همانطور که می بینید، جریان هشدار به این صورت است: BUTTON -> FORM -> DIV

1. CAPTURING (یا TRICKLING): همانطور که هر چیزی را از بالا به پایین می گیریم، بنابراین همانطور که از نام آن پیداست، رویداد از بالا به پایین فعال می شود

کد JS برای TRICKLING:

=> روش stopPropagation()
حالا فرض کنید، ما نمی‌خواهیم Bubbling یا Trickling را اجرا کنیم، یعنی می‌خواهیم اگر روی دکمه کلیک شود، رویداد فقط روی دکمه کلیک فعال شود.

هیئت رویداد:-

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

مثال: فرض کنید یک برنامه E-Comm وجود دارد، که در آن دسته بندی های مختلفی مانند MOBILE، HEADPHONE و غیره وجود دارد (همانطور که در کد نشان داده شده است)

اکنون لازم نیست شنوندگان رویداد را به همه دسته‌های موجود اضافه کنیم. ما می‌توانیم شنونده‌های رویداد را فقط به div والد اضافه کنیم که در اینجا از کلاس «محصولات» است.

و اکنون از آنجایی که برچسب برای همه دسته‌ها “span” است، پس ما فقط آنهایی را که tagName “span” دارند فیلتر کرده‌ایم و اکنون به نام مسیر فقط کسانی که tagName انتخاب شده‌اند راه‌اندازی می‌شود.

در نمایندگی رویداد (javascript.info) بیشتر بخوانید

رویداد Delegation توسط Rounit Sinha (codepen.io)

مثال: فرض کنید یک برنامه E-Comm وجود دارد، که در آن دسته بندی های مختلفی مانند MOBILE، HEADPHONE و غیره وجود دارد (همانطور که در کد نشان داده شده است)
اکنون لازم نیست شنوندگان رویداد را به همه دسته‌های موجود اضافه کنیم. ما می‌توانیم شنونده‌های رویداد را فقط به div والد اضافه کنیم که در اینجا از کلاس «محصولات» است.
و اکنون از آنجایی که برچسب برای همه دسته‌ها “span” است، ما فقط آنهایی را که tagName “span” دارند فیلتر کرده‌ایم و اکنون به نام مسیر تنها کسانی که tagName انتخاب شده‌اند راه اندازی می‌شود.
در نمایندگی رویداد (javascript.info) بیشتر بخوانید