জাভাস্ক্রিপ্টে ইভেন্ট ডেলিগেশন মেথড কী, কেন, এবং কীভাবে ব্যবহার করবেন তা শিখুন।
জাভাস্ক্রিপ্ট ইভেন্ট ডেলিগেশন কী এবং কখন ব্যবহার করবেন?
সংক্ষেপে, ইভেন্ট ডেলিগেশন হলো একটি জাভাস্ক্রিপ্ট মেথড যা আপনাকে চাইল্ড এলিমেন্টগুলোর সাথে ইন্টারঅ্যাক্ট করতে দেয় শুধু একটি সিঙ্গেল ইভেন্ট লিসেনার ব্যবহার করে, প্যারেন্ট এলিমেন্টে। ইভেন্ট ডেলিগেশন দিয়ে আপনি প্রতিটি চাইল্ড এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করার ঝামেলা থেকে বাঁচতে পারেন, কিন্তু সেগুলো খুঁজে বের করে ম্যানিপুলেট করতে পারেন।
আপনি একটু পর দেখবেন কেন এটি পাওয়ারফুল।
মান লিন আপনার কাছে একটি লিস্টের ভিতরে আইটেমের লিস্ট আছে। যখন ইউজার যেকোনো লিস্ট আইটেমে ক্লিক করবে, আপনি কিছু ঘটাতে চান।
চলুন দুটি ভিন্ন পদ্ধতি দেখি।
প্রতিটি এলিমেন্টে ইভেন্ট লিসেনার আট্যাচ করা
একটি লিস্টে আস্তিত্ব রক্ষা করা আইটেমগুলোতে অ্যাক্সেস পাওয়ার একটি সাধারণ পদ্ধতি হচ্ছে সেগুলোর মাধ্যমে লুপ করা (যেমন for লুপ দিয়ে)। এবং তারপর প্রতিটি এলিমেন্টে ইভেন্ট লিসেনার আট্যাচ করা:
let allExerciseItems = document.querySelectorAll(".exercise-item") for (let exerciseItem of allExerciseItems) { exerciseItem.addEventListener("click", function(event) { // টার্গেট চাইল্ড এলিমেন্টের সাথে কিছু করুন event.target.classList.toggle("exercise-complete") }); }উদাহরণ
https://codepen.io/StrengthandFreedom/pen/KBZezV/
ইভেন্ট ডেলিগেশন দিয়ে আইটেম অ্যাক্সেস করা
ইভেন্ট ডেলিগেশন উপরের for লুপ উদাহরণ থেকে সম্পূর্ণ ভিন্ন। প্রতিটি এলিমেন্টের মাধ্যমে ইটারেট (লুপ) করার বদলে, আমরা সিম্পলি প্যারেন্ট এলিমেন্টটিকে টার্গেট করি, এরকম:
// প্যারেন্ট এলিমেন্ট পান, ক্লিক ইভেন্ট লিসেনার যোগ করুন document.querySelector(".exercise-list").addEventListener("click", function(event) { if(event.target.classList.contains('exercise-item')) { // টার্গেট চাইল্ড এলিমেন্টের সাথে কিছু করুন event.target.classList.toggle('exercise-complete') } })CodePen উদাহরণ। নোট: classList.contains-র পরিবর্তে আপনি element.matches API matches() ব্যবহার করতে পারেন যদি আপনাকে আরও সিলেক্টর ফ্লেক্সিবিলিটি দরকার হয়।
আপনি দেখতে পাচ্ছেন, ফলাফল ঠিক একই। আপনি যখন এই পৃষ্ঠার যেকোনো এক্সারসাইজ এলিমেন্ট আইটেমে ক্লিক করেন, সেগুলো exercise-complete ক্লাস টগল করে। পার্থক্য হলো আমরা এই ফলাফল পাওয়ার জন্য যে মেথডটি ব্যবহার করেছি।
তাহলে আপনি কেন ইভেন্ট হ্যান্ডলিং + for লুপ মেথডের বদলে ইভেন্ট ডেলিগেশন মেথড ব্যবহার করবেন?
আসুন এখন সেটি আলোচনা করি!
ইভেন্ট ডেলিগেশন এবং পারফরম্যান্স
কল্পনা করুন আপনি একটি ওয়েব অ্যাপ্লিকেশনের সাথে ডील করছেন যেখানে আপনার কাছে সোদিন, ঘন্টা, অথবা মিনিটে সেকেন্ডে সैंकড়ো হাজারো ডাইনামিক্যালি তৈরি হওয়া এলিমেন্ট আছে। উদাহরণ হতে পারে হোটেল রিজার্ভেশনের জন্য বুকিং ক্যালেন্ডার। অথবা টুইটারের মত একটি সোশ্যাল মিডিয়া প্ল্যাটফর্ম যেন আপটিমাল ইউজার এক্সপেরিয়েন্সের জন্য সেটিনিউস লাইভ আপডেট রিকোয়ার করে।
যদি আপনার ওয়েব UI-র প্রতিটি এলিমেন্টে ইভেন্ট লিসেনার আট্যাচ করা থাকে, এই টাইপের সিনেরিও খুব দ্রুত হার্ডওয়্যার ইনটেনসিভ হতে পারে।
সেই সকল ইভেন্ট লিসেনার আপনার ইউজারের CPU হগ করতে পারে। সেগুলো মেমরিতে enorme পরিমাণ ফাংশন রেফারেন্স জমা করতে পারে। এটি মেমরি লিক এবং সাধারণ পারফরম্যান্স ডিগ্রেডেশন সৃষ্টি করতে পারে।
আমি GC (গারবেজ কলেকশন) সম্পর্কে বেশি কিছু জানি না। আমার জাভাস্ক্রিপ্ট (একটি হাই-লেভেল প্রোগ্রামিং ল্যাঙ্গুয়েজ) প্রায়শই একমাত্র লিখার সুযোগ मिलেছে। কিন্তু একটা জিনিস আমি জানি, ব্রাউজারে GC অনপ্রেডিক্টেবল হতে পারে অসংখ্য ভিন্ন ভেন্ডর ব্রাউজার (Chrome, Firefox ইত্যাদি) এবং অবশ্যই অসংখ্য ডিভাইস (স্মার্টফোন, ল্যাপটপ ইত্যাদি) এর কারণে।
গারবেজ কলেকশন
সংক্ষেপে, গারবেজ কলেকশন হলো একটি কম্পিউটার মেমরি ম্যানেজমেন্ট টাইপ। একটি গারবেজ কলেক্টর পুরনো/অন유জড কোড সরানোর চেষ্টা করে যা সেখানে পড়ে আপনার কম্পিউটারের মেমরি জামায়। বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং সিস্টেমের জন্য অসংখ্য ভিন্ন গারবেজ কলেক্টর আছে।
প্রতিটি এলিমেন্টে ইভেন্ট লিসেনার আট্যাচ করা থাকলে, যেমন আপনি লুপ উদাহরণে দেখেছেন, আপনার ওয়েব অ্যাপের গারবেজ কলেকশন দরকার বেড়ে যাবে। এটি почти অবশ্যই পারফরম্যান্স কমিয়ে দেবে।
একটি প্যারেন্ট এলিমেন্টে সিঙ্গেল ইভেন্ট লিসেনার থাকা যেটি এর সকল চাইল্ড এলিমেন্টের ক্লিকের জন্য শুনে, সেটি সাধারণত প্রতিটি চাইল্ড এলিমেন্টে আলাদা আলাদা ইভেন্ট লিসেনার আট্যাচ করার চেয়ে বেশি পারফরম্যান্ট।
