الگوی Event Delegation چیه؟ ✌️

در این پست می‌خوایم با الگویی به نام Event Delegation آشنا بشیم که بهمون اجازه میده پروژه هایی سریع‌تر، خواناتر و با عملکرد بالاتری داشته باشیم.

اگه چندین المنت مشابه داشتیم و نیاز بود با یک رویداد خاص (مثلاً keyup) همهٔ این المنت‌ها رو مدیریت کنیم، این الگو با استفاده از قابلیت Event Propagation، بهمون اجازه میده تا با اضافه کردن هندلر (یا Listener) به المنت والد، بتونیم رویدادهای المنت‌های داخلی رو مدیریت کنیم. یعنی ما به جای اینکه برای تک تک این المنت‌ها هندلر بنویسیم، هندلر رو به المنت والد اضافه می‌کنیم.

بریم که این الگو رو پیاده‌سازی کنیم. المنت‌های زیر رو در نظر بگیرید ⬇️

<form> 
  <input id="num-1" name="num-1"> 
  <input id="num-2" name="num-2"> 
  <input id="num-3" name="num-3"> 
  <input id="num-4" name="num-4"> 
  <input id="num-5" name="num-5"> 
  <input id="num-6" name="num-6"> 
</form> 

ما ابتدا برای المنت والد یعنی <form> یک ایونت keyUp تنظیم میکنیم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  console.log(event.target.value); 
}); 

باید بدونیم که با این کد، رویداد keyup همهٔ المنت‌های داخلی فرم قابل مدیریت هست و با رخ دادن این رویداد، کدی که توی هندلر نوشتیم برای همهٔ المنت‌ها اجرا میشه، حتی برای ورودی‌های دیگه‌ای مثل textarea و checkbox. حالا اگه ما بخوایم فقط برای input های نوع text این رویداد رو مدیریت کنیم، باید توی هندلر این قضیه رو مدیریت و محدود کنیم و مشخص کنیم که دقیقاً با کدوم ورودی‌ها سر و کار داریم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  if (event.target.tagName === 'INPUT' && event.target.type === 'text') { 
    console.log(event.target); 
  } 
}); 

حالا به راحتی می‌تونیم رویداد keyup همهٔ <input> ها رو مدیریت کنیم و حتی اگه ورودی‌هایی اضافه یا کم بشه، کدی که نوشتیم دیگه تغییری نمی‌کنه. برای کسب اطلاعات بیشتر این مقاله رو مطالعه کنید.

#javascript #eventDelegation
@CodeModule