WebMaster Sohel

JavaScript-এ Event Delegation খুবই গুরুত্বপূর্ণ একটা concept—বিশেষ করে যখন আপনি অনেকগুলো element নিয়ে কাজ করেন (যেমন list, table, dynamic UI)।

Event Delegation কী?

Event Delegation হলো এমন একটা technique যেখানে আপনি parent element-এ event listener বসান, আর child element-গুলোর event সেই parent handle করে।

Event Delegation হলো এমন একটি design pattern যেখানে:

👉 অনেকগুলো child element-এর জন্য আলাদা আলাদা event listener না বসিয়ে
👉 তাদের common parent element-এ একটাই event listener বসানো হয়
👉 এবং parent element event propagation ব্যবহার করে child-এর event handle করে
👉 কারণ: JavaScript-এ event bubble হয়ে উপরে উঠে যায় (event bubbling)

Core Concept (৩টা জিনিস বুঝলেই হয়ে যাবে)
1️⃣ Event Propagation

Browser-এ event ৩ভাবে চলে:

Capturing Phase (উপরে → নিচে)
Target Phase (যেখানে event ঘটেছে)
Bubbling Phase (নিচে → উপরে)

2️⃣ Event Bubbling

যখন কোনো child element-এ event হয়, তখন সেটা:

👉 তার parent → grandparent → document পর্যন্ত উঠে যায়

এই কারণে parent element child-এর event ধরতে পারে

3️⃣ Target Detection

Parent element event ধরলেও:

👉 আসলে কোন child-এ event হয়েছে, সেটা জানা লাগে

এই কাজের জন্য ব্যবহার করা হয়:

event.target → actual clicked element
event.currentTarget → যেখানে listener বসানো

🔹 Event Delegation কীভাবে কাজ করে (Concept Flow)
User কোনো child element-এ click করে
Event target element-এ trigger হয়
Event bubbling হয়ে parent-এ উঠে যায়
Parent-এর event listener event ধরে
event.target দেখে বুঝে নেয় কোন element-এ click হয়েছে
সেই অনুযায়ী action নেয়

কেন Event Delegation ব্যবহার করবো?

✅ Performance ভালো
✅ কম memory use করে
✅ Dynamic element (JS দিয়ে add করা) তেও কাজ করে
✅ Cleaner code

Eid Mubarak 🌹