ইভেন্ট ডেলিগেশন কী?
ইভেন্ট ডেলিগেশন হলো একটি উন্নত টেকনিক, যা জাভাস্ক্রিপ্টে DOM ইভেন্ট হ্যান্ডলিংকে আরও কার্যকর এবং সহজ করে তোলে। সাধারণত, যখন আমরা একটি ইভেন্ট হ্যান্ডলার অ্যাটাচ করি, তখন তা নির্দিষ্ট একটি DOM element-এর সাথে সরাসরি যুক্ত হয়। কিন্তু যখন অনেকগুলো child elements থাকে, তখন প্রত্যেকটির জন্য আলাদা ইভেন্ট হ্যান্ডলার অ্যাটাচ করা অপ্রয়োজনীয় ও মেমোরি সাশ্রয়ী নয়। এখানে ইভেন্ট ডেলিগেশন কাজে আসে।
ইভেন্ট ডেলিগেশন মূলত "Event Bubbling" মেকানিজমের ওপর ভিত্তি করে কাজ করে। এই মেকানিজমের মাধ্যমে ইভেন্টটি তার ইন্টেন্ডেড টার্গেট থেকে উপরের দিকে (parent elements-এর দিকে) propagate হতে থাকে, যতক্ষণ না তা document-এ পৌঁছে।
Event Bubbling কী?
Event Bubbling এমন একটি প্রক্রিয়া যেখানে একটি ইভেন্ট তার সবচেয়ে inner target element থেকে শুরু হয় এবং ক্রমান্বয়ে তার parent elements পর্যন্ত পৌঁছে। ধরুন, আপনি একটি <button>-এ ক্লিক করলেন যা একটি <div>-এর মধ্যে রয়েছে, এবং সেই <div> আবার একটি <body> ট্যাগের মধ্যে রয়েছে। ক্লিক ইভেন্টটি প্রথমে <button>-এ শুরু হয়, তারপর তা bubbling এর মাধ্যমে <div>, এবং শেষে <body> পর্যন্ত পৌঁছে। এই <button> থেকে <body> পর্যন্ত পৌঁছাই হচ্ছে Event Bubbling ।
ইভেন্ট ডেলিগেশন কীভাবে কাজ করে?
ইভেন্ট ডেলিগেশনকে কাজে লাগিয়ে, আমরা parent element-এ একটি ইভেন্ট লিসেনার অ্যাটাচ করি এবং event bubbling এর মাধ্যমে child elements-এর ইভেন্টগুলোকেও হ্যান্ডল করতে পারি।
যেমন:
একটি সাধারণ লিস্টে ক্লিক ইভেন্ট হ্যান্ডল করা
ধরা যাক, আমার কাছে একটি লিস্ট রয়েছে যেখানে অনেকগুলো li item রয়েছে। প্রতিটি li item-এ ক্লিক করলে একটি মেসেজ প্রদর্শিত হবে।
htmlCopy code
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const myList = document.getElementById('my-list');
// ইভেন্ট ডেলিগেশন ব্যবহার করে parent <ul> element-এ ইভেন্ট লিসেনার যোগ করা হলো
myList.addEventListener('click', (e)=> {
e.preventDefault();
// নিশ্চিত করা হচ্ছে যে ক্লিকটি <li> element এ হয়েছে
if (event.target.tagName === 'LI') {
alert('You clicked on ' + event.target.textContent);
}
});
</script>
এই কোডে, শুধুমাত্র ul element-এ একটি ইভেন্ট লিসেনার যোগ করা হয়েছে। যখনই কোনো li element-এ ক্লিক করা হবে, ইভেন্টটি ul-এ bubble up হবে, এবং আমরা event.target থেকে জানতে পারব যে, ক্লিকটি কোন li element-এ ঘটেছে।
ইভেন্ট ডেলিগেশন কেন প্রয়োজন?
- কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
- পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
- ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।
ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।
htmlCopy code
<button id="add-item">Add Item</button>
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const myList = document.getElementById('my-list');
const addItemButton = document.getElementById('add-item');
let itemCount = 2;
addItemButton.addEventListener('click', (e)=>{
e.preventDefault();
itemCount++;
const newItem = document.createElement('li');
newItem.textContent = 'Item ' + itemCount;
myList.appendChild(newItem);
});
myList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('You clicked on ' + event.target.textContent);
}
});
</script>
এখানে, আমরা একটি নতুন li item যোগ করার জন্য একটি বাটন যুক্ত করেছি। যখনই একটি নতুন item যোগ করা হবে, সেই item-এ ক্লিক করলে ul element-এ অ্যাটাচ করা ইভেন্ট লিসেনার তার ক্লিক ইভেন্টটি হ্যান্ডল করবে, এবং একটি মেসেজ দেখাবে।
ইভেন্ট ডেলিগেশন ছাড়া একই কাজ করা হলে কী সমস্যা হতো?
htmlCopy code
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
// প্রত্যেকটি <li> element এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে
const items = document.querySelectorAll('#my-list li');
items.forEach(function(item) {
item.addEventListener('click', function() {
alert('You clicked on ' + item.textContent);
});
});
</script>
এই কোডে, প্রত্যেকটি li item-এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে। কিন্তু এই পদ্ধতি বেশি মেমোরি ব্যবহার করে এবং যদি নতুন li item যোগ করা হয়, তখন সেই item-এ আলাদাভাবে ইভেন্ট লিসেনার অ্যাটাচ করতে হবে। ইভেন্ট ডেলিগেশন এই সমস্যাগুলো দূর করতে পারে।
উপসংহার
ইভেন্ট ডেলিগেশন একটি শক্তিশালী এবং কার্যকর টেকনিক যা আপনাকে জাভাস্ক্রিপ্টে DOM ইভেন্ট ম্যানেজমেন্টের ক্ষেত্রে সহজ, পরিষ্কার, এবং মেমোরি সাশ্রয়ী কোড লিখতে সাহায্য করে। এটি parent elements-এর ইভেন্ট লিসেনার ব্যবহার করে child elements-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।
Top comments (0)