تکنیک Event Delegation در جاوااسکریپت چیست؟

1. مزایای واگذاری رویداد
2. مثال عملی

واگذاری رویداد (Event Delegation) در جاوااسکریپت به معنای استفاده از یک والد مشترک برای پاسخ به رویدادهای UI به جای اضافه کردن شنونده‌های رویداد به هر عنصر فرزند به طور جداگانه است. این تکنیک بر اساس "بهره‌برداری از Event Bubbling" کار می‌کند، که به این معناست که وقتی یک رویداد روی یک عنصر رخ می‌دهد، این رویداد به سمت بالا در سلسله مراتب DOM حرکت می‌کند و می‌تواند شنونده‌های رویداد را روی والدین آن عنصر فعال کند تا واکنش‌های مناسب انجام شود.

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

مزایای واگذاری رویداد

1. ساده‌سازی کد: به جای اینکه مجموعه‌ای از شنونده‌های رویداد به هر عنصر فرزند اضافه کنید، تنها باید یک شنونده‌ رویداد برای والد تعریف کنید و با استفاده از خاصیت event.target، مشخص کنید کدام عنصر کلیک شده است.
2. مدیریت آسان عناصر دینامیک: اگر عناصر جدیدی به لیست اضافه شوند یا حذف شوند، نیازی به بازتعریف شنونده‌های رویداد نیست. به عنوان مثال، زمانی که یک عنصر جدید <li> به لیست اضافه می‌کنید، شنونده رویداد روی والد به طور خودکار آنها را شناسایی خواهد کرد.
3. کاهش مصرف حافظه: با استفاده از واگذاری رویداد، تعداد کمی شنونده رویداد به ازای تعداد زیادی عنصر فرزند ایجاد می‌شود. این می‌تواند به کاهش میزان حافظه استفاده شده در اپلیکیشن‌های طولانی‌مدت کمک کند و از بروز نشت حافظه جلوگیری کند.

مثال عملی

در مثال زیر، یک لیست از عناصر <li> وجود دارد که واکنش به کلیک روی هر یک از آنها توسط یک شنونده رویداد تعریف شده روی والد، یعنی عنصر <ul>، انجام می‌شود:

      <ul id="parent-list">
  <li id="post-1">مورد 1</li>
  <li id="post-2">مورد 2</li>
  <li id="post-3">مورد 3</li>
</ul>

<script>
document.getElementById("parent-list").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName === "LI") {
        console.log("مورد ", e.target.id.replace("post-"), " کلیک شد!");
    }
});
</script>

    

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