JavaScript-এ উপাদানগুলিতে ইভেন্ট হ্যান্ডলার বাঁধা
আসুন এখন আমাদের DOM উপাদানগুলিকে ওয়েবসাইট ব্যবহারকারীর কর্মের প্রতিক্রিয়া জানাতে শেখাই। উদাহরণস্বরূপ, ব্যবহারকারী কোথাও মাউস ক্লিক করবে, এবং তার প্রতিক্রিয়া হিসাবে আমাদের কোড সেই ক্লিক প্রক্রিয়া করবে এবং স্ক্রিনে কিছু তথ্য প্রদর্শন করবে।
ব্যবহারকারীর সেই সমস্ত কর্ম যা আমরা JavaScript এর মাধ্যমে ট্র্যাক করতে পারি তাদের ইভেন্ট বলা হয়। ইভেন্টগুলি নিম্নলিখিত হতে পারে: পৃষ্ঠার একটি উপাদানে মাউস ক্লিক করা, একটি উপাদানের উপর মাউস নিয়ে আসা বা বিপরীতভাবে - উপাদান থেকে মাউস কার্সার সরিয়ে নেওয়া ইত্যাদি। তদতিরিক্ত, এমন ইভেন্টও রয়েছে যা ব্যবহারকারীর কর্ম থেকে স্বাধীন, উদাহরণস্বরূপ, ব্রাউজারে HTML পৃষ্ঠা লোড হওয়ার ইভেন্ট।
উদাহরণস্বরূপ, আসুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে স্ক্রিনে কিছু পাঠ্য প্রদর্শিত হয়। প্রথমে বাটনের HTML কোড তৈরি করি:
<input id="button" type="submit">
এখন একটি ভেরিয়েবলে বাটনের একটি রেফারেন্স পাই:
let button = document.querySelector('#button');
এখন আমাদের বাটনে ক্লিক করার সময় এর প্রতিক্রিয়া নির্ধারণ করা প্রয়োজন।
এই জন্য JavaScript-এ একটি বিশেষ পদ্ধতি রয়েছে addEventListener,
যা প্রথম প্যারামিটার হিসাবে ইভেন্টের নাম নেয়
(বাটনে ক্লিক করার ইভেন্টের নাম 'click'),
এবং দ্বিতীয় প্যারামিটার হিসাবে - একটি কলব্যাক ফাংশন,
যা এই ইভেন্টটি ঘটলে কার্যকর হয়।
আসুন, উদাহরণস্বরূপ, বাটনে ক্লিক করলে কিছু পাঠ্য আউটপুট করি:
button.addEventListener('click', function() {
console.log('!!!');
});
3টি বাটন দেওয়া আছে:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
এটি এমনভাবে তৈরি করুন যাতে প্রথম বাটনে ক্লিক করলে
স্ক্রিনে 1 নম্বরটি প্রদর্শিত হয়, দ্বিতীয় বাটনে ক্লিক করলে -
2 নম্বরটি, এবং তৃতীয় বাটনে ক্লিক করলে -
3 নম্বরটি প্রদর্শিত হয়।
