تسلط بر نمایندگی رویداد جاوا اسکریپت – انجمن DEV

معرفی

مدیریت رویداد یک جنبه حیاتی در ساخت برنامه های کاربردی وب تعاملی است. با افزایش پیچیدگی برنامه های وب، مدیریت موثر رویدادها چالش برانگیز می شود. اینجاست که هیئت رویداد مفید است. در این پست وبلاگ، مفهوم تفویض رویداد را بررسی خواهیم کرد، مزایای آن را درک خواهیم کرد و خواهیم دید که چگونه می توان آن را در جاوا اسکریپت پیاده سازی کرد.

لطفا برای حمایت از کانال من و دریافت آموزش های بیشتر توسعه وب، در کانال یوتیوب من مشترک شوید.

Delegation رویداد چیست؟

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

چرا از نمایندگی رویداد استفاده کنیم؟

1. عملکرد بهبود یافته: افزودن یک شنونده رویداد به یک عنصر والد کارآمدتر از افزودن چندین شنونده رویداد به عناصر فرزند است، به خصوص زمانی که با تعداد زیادی از عناصر فرزند سروکار دارید.
2. مدیریت محتوای پویا: تفویض رویداد مدیریت رویدادها را برای عناصر فرزند به صورت پویا بدون نیاز به پیوست کردن شنوندگان رویداد آسان‌تر می‌کند.
3. تعمیر و نگهداری کد ساده تر: کاهش تعداد شنوندگان رویداد، کد را ساده می‌کند و نگهداری آن را آسان‌تر می‌کند.

نحوه کار نمایندگی رویداد

تفویض رویداد بر مفهوم حباب‌سازی رویداد تکیه می‌کند، جایی که یک رویداد از عنصر هدف به والدین خود منتشر می‌شود (یا حباب می‌شود). با تنظیم یک شنونده رویداد بر روی یک عنصر والد، می‌توانید رویدادها را از عناصر فرزند آن ضبط کنید و هدف رویداد را با استفاده از event.target ویژگی.

سناریوی نمونه

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

ساختار HTML

 id="item-list">
  
Item 1
  
Item 2
  
Item 3
  
Item 4

پیاده سازی جاوا اسکریپت

document.getElementById('item-list').addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    console.log('List item clicked:', event.target.textContent);
  }
});

در این مثال، شنونده رویداد تک کلیکی را به والد اضافه می کنیم element. When a

const newItem = document.createElement('li');
newItem.textContent = 'New Item';
document.getElementById('item-list').appendChild(newItem);

document.getElementById('container').addEventListener('click', function(event) {
  if (event.target && event.target.classList.contains('btn')) {
    console.log('Button clicked:', event.target.textContent);
  }
});