JavaScript-এ ইভেন্ট ডেলিগেশন

পূর্ববর্তী পাঠে, নতুন উপাদান যোগ করার সময় উদ্ভূত সমস্যাটি বর্ণনা করা হয়েছিল, এবং এর সমাধান দেওয়া হয়েছিল। এই পাঠে আমরা সমস্যাটি এড়ানোর একটি আরও ভাল উপায় বিবেচনা করব - ইভেন্ট ডেলিগেশন। আসুন এটি বুঝে নেই।

আপনি ইতিমধ্যেই জানেন, li-এ ক্লিক করলে, আমরা একই সময়ে ul-এও ক্লিক করি। এটি ইভেন্ট বাবলিং-এর কারণে সম্ভব। আমরা এটি আমাদের কাজটি সমাধান করতে ব্যবহার করতে পারি: প্রতিটি li-তে ইভেন্ট সংযুক্ত না করে, তাদের প্যারেন্ট ul-তে সংযুক্ত করি:

list.addEventListener('click', function() {
	
});

এখন ইভেন্ট হ্যান্ডলারে this সেই এলিমেন্টকে নির্দেশ করবে যার সাথে হ্যান্ডলার সংযুক্ত আছে, এবং event.target - সেই এলিমেন্টকে নির্দেশ করবে, যেখানে ইভেন্টটি ঘটেছে:

list.addEventListener('click', function(event) {
	console.log(this);         // আমাদের তালিকা
	console.log(event.target); // তালিকার আইটেম
});

আসুন এমন করি যে li-এর যেটিতে ক্লিক ঘটেছে, তার শেষে একটি বিস্ময়বোধক চিহ্ন যুক্ত হয়:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

উল্লিখিত সমাধানটি পুনরাবৃত্তি করুন। নিশ্চিত হন, যে নতুন li-গুলিও ক্লিকের প্রতিক্রিয়া দেখাবে।