Javascript Bangla Tutorial-49 : Dom Event | Event Object | Scroll, Resize, Toggle
জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-49 এ স্বাগতম! এই মজার টিউটোরিয়ালে, আমরা ডোম ইভেন্ট, ইভেন্ট অবজেক্ট সম্পর্কে আলোচনা করব এবং দেখব কিভাবে স্ক্রল, রিসাইজ এবং টগল ইভেন্টগুলি জাভাস্ক্রিপ্টে হ্যান্ডেল করা হয়। ইভেন্ট এবং ইভেন্ট হ্যান্ডেলিং বৃদ্ধির জন্য জানা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডাইনামিক এবং ইন্টারাক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করার সুযোগ সৃষ্টি করে।
সেকশন ১: ডোম ইভেন্ট
ডোম ইভেন্ট হলো ওয়েব পৃষ্ঠা এবং এই পৃষ্ঠার উপাদানের (HTML এলিমেন্ট) সাথে সংঘটিত ঘটনা বা ক্রিয়া। ইউজারের প্রয়োজনীয় ক্লিক, ডবল ক্লিক, কীবোর্ডের অ্যাকশন, মাউস কার্সরের উপরে মাউস স্থানান্তর ইত্যাদি ঘটনাগুলি ডোম ইভেন্ট হিসেবে ধরা যায়। ডোম ইভেন্ট হ্যান্ডল করার জন্য জাভাস্ক্রিপ্টে বিশেষ প্রোপার্টি এবং মেথড ব্যবহার করা হয়।
সেকশন ২: ইভেন্ট অবজেক্ট
জাভাস্ক্রিপ্টে, ইভেন্ট হ্যান্ডলার ফাংশন কে একটি ইভেন্ট অবজেক্ট বা ইভেন্ট ইন্সট্যান্স দিয়ে প্রস্তুত করা হয়। এটি সেই ঘটনার সময় ঘটে যা ইভেন্ট হ্যান্ডলার সম্পর্কে সমস্ত তথ্য সরবরাহ করে। ইভেন্ট অবজেক্টে রয়েছে বিভিন্ন প্রপার্টি যেমন target, type, currentTarget, preventDefault ইত্যাদি যা ইভেন্ট সম্পর্কিত মূল তথ্য সরবরাহ করে।
সেকশন ৩: স্ক্রল ইভেন্ট হ্যান্ডল করা
স্ক্রল ইভেন্ট হ্যান্ডল করা হয় যখন একটি ওয়েব পৃষ্ঠা বা এই পৃষ্ঠার অংশ স্ক্রল করা হয়। স্ক্রল ইভেন্ট ট্র্যাক করতে 'scroll' ইভেন্ট ব্যবহার করা হয়। স্ক্রল ইভেন্ট হ্যান্ডল করার মাধ্যমে আপনি পাতার স্থানান্তর সম্পর্কিত তথ্য জানতে পারেন এবং যদি আপনি প্রয়োজনে পৃষ্ঠার কিছু অংশ প্রকাশ করতে চান, তা করতে পারেন।
সেকশন ৪: রিসাইজ ইভেন্ট হ্যান্ডল করা
রিসাইজ ইভেন্ট হ্যান্ডল করা হয় যখন ব্রাউজারের উইন্ডো আকার পরিবর্তন করা হয়। ব্রাউজার উইন্ডো আকার পরিবর্তন করার ফলে ওয়েবপেজের কনটেন্টের প্রস্থ এবং উচ্চতা পরিবর্তন হতে পারে। রিসাইজ ইভেন্ট ট্র্যাক করতে 'resize' ইভেন্ট ব্যবহার করা হয়। রিসাইজ ইভেন্ট হ্যান্ডল করার মাধ্যমে আপনি পৃষ্ঠার আকার পরিবর্তন সম্পর্কিত তথ্য জানতে পারেন এবং যদি প্রয়োজন হয়, আপনি পৃষ্ঠার লেআউট প্রস্তুতি পরিবর্তন করতে পারেন।
সেকশন ৫: টগল ইভেন্ট হ্যান্ডল করা
টগল ইভেন্ট হ্যান্ডল করা হয় যখন একটি এলিমেন্টের স্থিতি পরিবর্তন করা হয় এবং তা দ্বারা দেখা যায় বা দেখা বন্ধ করা যায়। টগল ইভেন্ট একটি পাসিভ ইভেন্ট, অর্থাৎ এটি স্বয়ংক্রিয়ভাবে ঘটে না। এটি টগল হওয়ার ফলে সাধারণভাবে একটি স্টেট চেকবক্স এর উপর ভিত্তি করে কাজ করে, যেমন মেনু খোলা / বন্ধ করা, লাইট মোড চালু / বন্ধ করা ইত্যাদি।
সেকশন ৬: কিছু উদাহরণ সহ প্র্যাকটিস
এই সেকশনে, আমরা কিছু উদাহরণ সহ প্র্যাকটিস করব যাতে আপনি বিভিন্ন ইভেন্টগুলি কিভাবে হ্যান্ডেল করতে পারেন তা দেখতে পারেন।
৬.১ ডোম ইভেন্ট হ্যান্ডল করা
ডোম ইভেন্ট প্র্যাকটিস উপরের উদাহরণে, একটি বাটনে ক্লিক করার ইভেন্ট হ্যান্ডেল করা হয়েছে। যখন বাটনে ক্লিক করা হবে, ব্রাউজার একটি অ্যালার্ট দেখাবে যেখানে "আপনি ক্লিক করেছেন!" লেখা থাকবে।
৬.২ স্ক্রল ইভেন্ট হ্যান্ডল করা
স্ক্রল ইভেন্ট প্র্যাকটিস এটি একটি বড় প্যারাগ্রাফ।
এটি একটি বড় প্যারাগ্রাফ।
উপরের উদাহরণে, স্ক্রল ইভেন্ট হ্যান্ডেল করা হয়েছে। যখন ব্রাউজারে স্ক্রল করা হবে, একটি অ্যালার্ট দেখাবে যেখানে "আপনি স্ক্রল করছেন!" লেখা থাকবে।
উত্তরঃ ডোম ইভেন্ট হলো ওয়েব পৃষ্ঠা এবং এই পৃষ্ঠার উপাদানের (HTML এলিমেন্ট) সাথে সংঘটিত ঘটনা বা ক্রিয়া। ইউজারের প্রয়োজনীয় ক্লিক, ডবল ক্লিক, কীবোর্ডের অ্যাকশন, মাউস কার্সরের উপরে মাউস স্থানান্তর ইত্যাদি ঘটনাগুলি ডোম ইভেন্ট হিসেবে ধরা যায়। ডোম ইভেন্ট হ্যান্ডল করার জন্য জাভাস্ক্রিপ্টে বিশেষ প্রোপার্টি এবং মেথড ব্যবহার করা হয়।
উত্তরঃ জাভাস্ক্রিপ্টে, ইভেন্ট হ্যান্ডলার ফাংশন কে একটি ইভেন্ট অবজেক্ট বা ইভেন্ট ইন্সট্যান্স দিয়ে প্রস্তুত করা হয়। এটি সেই ঘটনার সময় ঘটে যা ইভেন্ট হ্যান্ডলার সম্পর্কে সমস্ত তথ্য সরবরাহ করে। ইভেন্ট অবজেক্টে রয়েছে বিভিন্ন প্রপার্টি যেমন target, type, currentTarget, preventDefault ইত্যাদি যা ইভেন্ট সম্পর্কিত মূল তথ্য সরবরাহ করে।
উত্তরঃ স্ক্রল ইভেন্ট হ্যান্ডল করার জন্য জাভাস্ক্রিপ্টে আমরা প্রোপার্টি window.addEventListener() ব্যবহার করতে পারি। এই মেথডে প্রথম প্যারামিটার হলো 'scroll' যা স্ক্রল ইভেন্টকে ট্র্যাক করবে, এবং দ্বিতীয় প্যারামিটার হলো হ্যান্ডলার ফাংশন যা ইভেন্ট ঘটনার সময় কল হবে। স্ক্রল ইভেন্ট হ্যান্ডল করার মাধ্যমে আপনি পাতার স্থানান্তর সম্পর্কিত তথ্য জানতে পারেন এবং যদি প্রয়োজনে পৃষ্ঠার কিছু অংশ প্রকাশ করতে চান, তা করতে পারেন।
Frequently Asked Questions (FAQs)
উত্তরঃ ডোম ইভেন্ট হলো ওয়েব পৃষ্ঠা এবং এই পৃষ্ঠার উপাদানের (HTML এলিমেন্ট) সাথে সংঘটিত ঘটনা বা ক্রিয়া। ইউজারের প্রয়োজনীয় ক্লিক, ডবল ক্লিক, কীবোর্ডের অ্যাকশন, মাউস কার্সরের উপরে মাউস স্থানান্তর ইত্যাদি ঘটনাগুলি ডোম ইভেন্ট হিসেবে ধরা যায়। ডোম ইভেন্ট হ্যান্ডল করার জন্য জাভাস্ক্রিপ্টে বিশেষ প্রোপার্টি এবং মেথড ব্যবহার করা হয়।
উত্তরঃ জাভাস্ক্রিপ্টে, ইভেন্ট হ্যান্ডলার ফাংশন কে একটি ইভেন্ট অবজেক্ট বা ইভেন্ট ইন্সট্যান্স দিয়ে প্রস্তুত করা হয়। এটি সেই ঘটনার সময় ঘটে যা ইভেন্ট হ্যান্ডলার সম্পর্কে সমস্ত তথ্য সরবরাহ করে। ইভেন্ট অবজেক্টে রয়েছে বিভিন্ন প্রপার্টি যেমন target, type, currentTarget, preventDefault ইত্যাদি যা ইভেন্ট সম্পর্কিত মূল তথ্য সরবরাহ করে।
উত্তরঃ স্ক্রল ইভেন্ট হ্যান্ডল করার জন্য জাভাস্ক্রিপ্টে আমরা প্রোপার্টি window.addEventListener() ব্যবহার করতে পারি। এই মেথডে প্রথম প্যারামিটার হলো 'scroll' যা স্ক্রল ইভেন্টকে ট্র্যাক করবে, এবং দ্বিতীয় প্যারামিটার হলো হ্যান্ডলার ফাংশন যা ইভেন্ট ঘটনার সময় কল হবে। স্ক্রল ইভেন্ট হ্যান্ডল করার মাধ্যমে আপনি পাতার স্থানান্তর সম্পর্কিত তথ্য জানতে পারেন এবং যদি প্রয়োজনে পৃষ্ঠার কিছু অংশ প্রকাশ করতে চান, তা করতে পারেন।
সমাপ্তি
জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-49 এ আমরা ডোম ইভেন্ট, ইভেন্ট অবজেক্ট, স্ক্রল, রিসাইজ, টগল ইভেন্টগুলি বিস্তারিতভাবে দেখেছি। এই ইভেন্টগুলি আপনার ওয়েব অ্যাপ্লিকেশনের দ্বারা ইন্টারয়েক্টিভ এবং ব্যাবহারিক হতে সাহায্য করতে পারে। আমরা কিছু প্র্যাকটিস উদাহরণের মাধ্যমে এই ইভেন্টগুলি কিভাবে কাজ করে সেগুলি দেখেছি। প্রয়োজনীয় সমস্ত তথ্য প্রস্তুত করার জন্য আপনি বিভিন্ন ধরনের ইভেন্ট হ্যান্ডলিং মেথড ব্যবহার করতে পারেন। তাহলে এখনি আপনার ওয়েব ডেভেলপমেন্ট প্রক্রিয়াকে একটি নতুন স্তরে আনুন এবং আপনার স্কিলসমৃদ্ধ অ্যাপ্লিকেশনগুলি তৈরি করার জন্য নতুন শখ প্রাপ্ত করুন!
