🎯 هندل‌کردن کلیک‌ها با Event Delegation

وقتی تعداد زیادی دکمه یا آیتم در DOM داریم، اضافه‌کردن یک event listener روی هر عنصر هم کند است، هم کد را شلوغ می‌کند. با Event Delegation فقط روی والد گوش می‌دهیم و رویداد را از مسیر event.target مدیریت می‌کنیم. 🔥

✅ این کار:
• تعداد listenerها را کم می‌کند ✂️
• مدیریت عناصر اضافه/حذف‌شونده را ساده می‌کند

مثال ساده روی یک لیست:

const list = document.querySelector('#user-list');

list.addEventListener('click', (event) => {
  const item = event.target.closest('li');
  if (!item || !list.contains(item)) return;

  const userId = item.dataset.userId;
  console.log('Clicked user:', userId);
});

حالا هر <li data-user-id="123"> که بعداً با JavaScript به #user-list اضافه شود، بدون نیاز به listener جدید، کلیک را هندل می‌کند. 🚀

برای جزئیات بیشتر: MDN - Event delegation

توی پروژه‌های سنگین DOM، این الگو هم خوانایی کد را بهتر می‌کند هم عملکرد را. 😉

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Event_Delegation #DOM #Performance #ES6

👤 Developix

💎 Channel: @DevelopixJavascript

⏱ جلوگیری از اجرای اضافی event با debounce ساده

تو پروژه‌های فرانت، eventهایی مثل scroll و input می‌تونن تو هر ثانیه ده‌ها بار فایر بشن و باعث لگ، مصرف CPU و رندر اضافه بشن. یک تکنیک ساده برای کنترل این ماجرا، استفاده از debounce هست. 😉

ایده: تا وقتی کاربر داره پشت‌سرهم تایپ یا اسکرول می‌کنه، تابع اصلی اجرا نشه؛ فقط وقتی یک مدت کوتاه هیچ eventی نیومد، تابع رو صدا بزن.

function debounce(fn, delay) {
  let timeoutId;
  return function (...args) {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const handleSearch = debounce((event) => {
  console.log("Search:", event.target.value);
}, 400);

const input = document.querySelector("#search");
input.addEventListener("input", handleSearch);

💡 این کار تعداد requestهای سرچ، رندر مجدد و لاگ‌ها رو به‌شدت کم می‌کنه و UX نرم‌تری می‌سازه.

مرجع بیشتر در مورد timing ها و eventها:
MDN - setTimeout

امتحانش روی inputهای سرچ یا resize و scroll نتیجه خیلی ملموسی می‌دهد. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #debounce #performance #events #frontend

👤 Developix

💎 Channel: @DevelopixJavascript