কীভাবে এবং কেন জাভাস্ক্রিপ্ট ইভেন্ট ডেলিগেশন ব্যবহার করবেন

জাভাস্ক্রিপ্টে ইভেন্ট ডেলিগেশন পদ্ধতি কী, কেন এবং কীভাবে ব্যবহার করবেন তা জানুন।

জাভাস্ক্রিপ্ট ইভেন্ট ডেলিগেশন কী এবং কখন এটি ব্যবহার করা উচিত?

সংক্ষেপে, ইভেন্ট ডেলিগেশন হল একটি জাভাস্ক্রিপ্ট পদ্ধতি যা আপনাকে শুধুমাত্র একটি একক ব্যবহার করে শিশু উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়। ইভেন্ট শ্রোতা, মূল উপাদানে। ইভেন্ট ডেলিগেশনের সাথে, আপনি প্রতিটি শিশু উপাদানে ইভেন্ট হ্যান্ডলার যোগ করা এড়াতে পারেন, কিন্তু আপনি এখনও তাদের খুঁজে বের করতে এবং ম্যানিপুলেট করতে পারেন।

আপনি দেখতে পাবেন কেন এটি এক মুহূর্তের মধ্যে শক্তিশালী।

বলুন আপনার একটি তালিকার ভিতরে আইটেমগুলির একটি তালিকা রয়েছে। যখন ব্যবহারকারী তালিকা আইটেম দুটিতে ক্লিক করে, আপনি কিছু ঘটতে চান৷

আসুন এটি করার দুটি ভিন্ন উপায় পরীক্ষা করে দেখি।

প্রতিটি উপাদানের সাথে ইভেন্ট শ্রোতাদের সংযুক্ত করুন

একটি তালিকায় পৃথক উপাদান আইটেমগুলিতে অ্যাক্সেস পাওয়ার একটি সাধারণ উপায় হল সেগুলির মাধ্যমে লুপ করা যেমন for দিয়ে লুপ. এবং তারপর প্রতিটি উপাদানের সাথে ইভেন্ট শ্রোতাদের সংযুক্ত করুন:

let allExerciseItems = document.querySelectorAll(".exercise-item")

for (let exerciseItem of allExerciseItems) {
 exerciseItem.addEventListener("click", function(event) {
  // Do something with target child element
  event.target.classList.toggle("exercise-complete")
 });
}

উদাহরণ

https://codepen.io/StrengthandFreedom/pen/KBZezV/

ইভেন্ট ডেলিগেশন সহ আইটেম অ্যাক্সেস করুন

ইভেন্ট প্রতিনিধি আপনি উপরে দেখেছেন লুপ উদাহরণ থেকে সম্পূর্ণ ভিন্ন. আমরা অ্যাক্সেস করতে চাই প্রতিটি উপাদানের মাধ্যমে পুনরাবৃত্তি করার (লুপিং) পরিবর্তে, আমরা কেবল মূল উপাদানটিকে লক্ষ্য করি, যেমন:

// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
  if(event.target.classList.contains('exercise-item')) {
  // Do something with target child element
  event.target.classList.toggle('exercise-complete')
  }
})

CodePen উদাহরণ। দ্রষ্টব্য:classList.contains এর পরিবর্তে আপনি element.matches API matches() ব্যবহার করতে পারেন আপনার যদি আরো নির্বাচক নমনীয়তা প্রয়োজন হয়।

আপনি দেখতে পাচ্ছেন, ফলাফল ঠিক একই। আপনি যখন এটিতে ব্যায়ামের উপাদান আইটেমটিতে ক্লিক করেন, তখন তারা exercise-complete টগল করে ক্লাস এই ফলাফল অর্জনের জন্য আমরা যে পদ্ধতি ব্যবহার করেছি তা ভিন্ন কি৷

তাহলে কেন আপনি ইভেন্ট হ্যান্ডলিং + লুপ পদ্ধতির পরিবর্তে ইভেন্ট প্রতিনিধি পদ্ধতি ব্যবহার করবেন?

এর পরে আলোচনা করা যাক!

ইভেন্ট অর্পণ এবং কর্মক্ষমতা

কল্পনা করুন যে আপনি একটি ওয়েব অ্যাপ্লিকেশন নিয়ে কাজ করছেন যেখানে আপনার প্রতিদিন, ঘন্টা বা এমনকি মিনিটে শত শত বা হাজার হাজার গতিশীলভাবে তৈরি উপাদান রয়েছে। একটি উদাহরণ হোটেল সংরক্ষণের জন্য একটি বুকিং ক্যালেন্ডার হতে পারে। অথবা একটি সামাজিক মিডিয়া প্ল্যাটফর্ম যেমন টুইটার যার জন্য একটি সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য ঘন ঘন লাইভ আপডেটের প্রয়োজন হয়৷

আপনার ওয়েব UI-এর প্রতিটি উপাদানের সাথে ইভেন্ট শ্রোতা যুক্ত থাকলে, এই ধরনের দৃশ্যকল্প দ্রুত হার্ডওয়্যার নিবিড় হয়ে উঠতে পারে।

সেই সমস্ত ইভেন্ট শ্রোতারা আপনার ব্যবহারকারীদের সিপিইউ হগ আপ করতে পারে। তারা মেমরিতে বসে প্রচুর পরিমাণে ফাংশন রেফারেন্স তৈরি করতে পারে। এটি মেমরি লিক এবং সাধারণ কর্মক্ষমতা অবনতির কারণ হতে পারে।

আমি জিসি (গার্বেজ কালেকশন) সম্পর্কে তেমন কিছু জানি না। আমি কমবেশি জাভাস্ক্রিপ্ট (একটি উচ্চ-স্তরের প্রোগ্রামিং ভাষা) লেখার বিলাসিতা পেয়েছি। কিন্তু একটি জিনিস যা আমি জানি, তা হল ব্রাউজারে GC অনেকগুলি ভিন্ন বিক্রেতা ব্রাউজারগুলির (Chrome, FireFox ইত্যাদি) কারণে অনির্দেশ্য হতে পারে। এবং, অবশ্যই, অসংখ্য ডিভাইস (স্মার্টফোন, ল্যাপটপ ইত্যাদি)।

আবর্জনা সংগ্রহ

সংক্ষেপে, গারবেজ কালেকশন হল এক ধরনের কম্পিউটার মেমরি ম্যানেজমেন্ট। একজন আবর্জনা সংগ্রাহক পুরানো/অব্যবহৃত কোড অপসারণ করার চেষ্টা করে যা সেখানে বসে থাকে এবং আপনার কম্পিউটারের মেমরি ক্লক করে। বিভিন্ন প্রোগ্রামিং ভাষা এবং সিস্টেমের জন্য অগণিত বিভিন্ন আবর্জনা সংগ্রহকারী রয়েছে।

সমস্ত কিছুর সাথে ইভেন্ট শ্রোতাদের সংযুক্ত করা, যেমন আপনি লুপের উদাহরণে দেখেছেন, আপনার ওয়েব অ্যাপের প্রয়োজনীয় আবর্জনা সংগ্রহের পরিমাণ বাড়িয়ে দেবে৷ এটি প্রায় অবিচ্ছিন্নভাবে কর্মক্ষমতা হ্রাস করবে৷

আপনার যখন একজন একক থাকে তখন এটি সাধারণত আরও বেশি কার্যকরী হয়৷ একটি অভিভাবক উপাদানে ইভেন্ট শ্রোতা যা প্রতিটি শিশু উপাদানের সাথে ইভেন্ট শ্রোতাদের সংযুক্ত করার চেয়ে তার চাইল্ড উপাদানগুলিতে সমস্ত ক্লিকের জন্য শোনে৷