জাভাস্ক্রিপ্ট ইভেন্ট: ইভেন্ট তৈরির তিনটি পদ্ধতি

ওয়েবসাইটে ইন্টারেক্টিভ ফিচার যোগ করার ক্ষেত্রে জাভাস্ক্রিপ্টের বিকল্প নেই। HTML এবং CSS যথাক্রমে ওয়েব পেজের কাঠামো ও স্টাইল নির্ধারণ করে, কিন্তু জাভাস্ক্রিপ্ট আপনার সাইটকে ডাইনামিক ও জীবন্ত করে তোলে।

জাভাস্ক্রিপ্ট ইভেন্ট কী?

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

জাভাস্ক্রিপ্ট ইভেন্টের বিস্তৃত ব্যবহার রয়েছে, যেমনঃ

• ফর্ম সঠিকভাবে পূরণ হয়েছে কিনা তা যাচাই করা
• ফর্ম পূরণ হলে ব্যবহারকারীকে অন্য পেজে নেভিগেট করা
• ড্রপডাউন মেনুকে ইন্টারেক্টিভ করা
• ছবিতে জুম ইন/আউট সুবিধা দেওয়া

জাভাস্ক্রিপ্টে ইভেন্ট নিয়ে কাজ করতে دوটি ধারণা জানতে হবে: ইভেন্ট হ্যান্ডলার এবং ইভেন্ট লিসেনার।

ইভেন্ট হ্যান্ডলার হলো একটি ফাংশন যা ইভেন্ট ট্রিগার হলে রান করে। ইভেন্ট লিসেনার একটি ইভেন্ট ফাংশনকে HTML এলিমেন্টের সাথে সংযুক্ত করে, যাতে ফাংশন এক্সিকিউট হলে এলিমেন্ট পরিবর্তন হয়।

ইভেন্ট হ্যান্ডলার তিনভাবে ডিফাইন করা যায়: ইনলাইন ইভেন্ট হ্যান্ডলার, ইভেন্ট প্রপার্টি, এবং ইভেন্ট লিসেনার।

ইনলাইন ইভেন্ট হ্যান্ডলার

জাভাস্ক্রিপ্টে ইভেন্ট শুরুর সবচেয়ে সহজ পদ্ধতি হলো ইনলাইন ইভেন্ট হ্যান্ডলার। এখানে আপনি আপনার HTML ফাইলের ভিতরে ইভেন্ট ডিফাইন করেন।

উদাহরণস্বরূপ, ধরি আমরা "জেজে স্মিথের বেকারি" নামক একটি বেকারির ওয়েবসাইট ডিজাইন করছি। ব্যবহারকারী ফর্ম সাবমিট করলে "রেসপন্স রিসিভড" (প্রতিক্রিয়া প্রাপ্ত হয়েছে) লেখাটি দেখাবে।

নিচের কোডটি বিবেচনা করুন:

<!DOCTYPE html> <html> <head> <title>JJ Smith's Bakery</title> </head> <script src="main.js"></script> <body> <p id="submitted"></p> <button onclick="submitForm()">Submit form</button> </body> </html>

এই কোড একটি বাটন সহ ওয়েব পেজ রেন্ডার করে। কিন্তু বাটনে ক্লিক করলে কিছুই হয় না, কারণ আমরা এখনো ইভেন্ট হ্যান্ডলার লিখিনি।

main.js ফাইলে নিচের কোড যোগ করুন:

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." }

এই কোড "submitted" আইডি वाले এলিমেন্টটি খুঁজে বের করে তার কন্টেন্ট "Form submitted." হিসেবে সেট করে। এটি শুধু তখনই রান হবে যখন submitForm() ফাংশনটি কল হবে, যা বাটনে ক্লিক করার সাথে জুড়ে দেওয়া আছে।

বাটনে ক্লিক করলে নিচের ফলাফল দেখা যাবে:

আমরা ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করে ওয়েব পেজকে ইন্টারেক্টিভ করেছি। কিন্তু এটি একমাত্র পদ্ধতি নয়। এখন ইভেন্ট হ্যান্ডলার প্রপার্টি নিয়ে আলোচনা করি।

হ্যান্ডলার প্রপার্টির মাধ্যমে ইভেন্ট

ইনলাইন হ্যান্ডলারে আপনাকে HTML ফাইলে ফাংশন নির্দিষ্ট করতে হয়। আগের উদাহরণে এই লাইনটি বাটন প্রেস হলে কোন ফাংশন কল হবে তা নির্ধারণ করত:

<button onclick="submitForm()">Submit form</button>

হ্যান্ডলার প্রপার্টি ব্যবহার করে আমরা "onclick" ইভেন্টটি HTML থেকে সরিয়ে নিতে পারি। এতে সকল জাভাস্ক্রিপ্ট কোড আলাদা ফাইলে রাখা যায়, যা কোড রক্ষণাবেক্ষণে সহায়ক। এই উদাহরণে বাটনটিকে "button" আইডি দিয়ে চিন्हांकন করব:

<button id="button">Submit form</button>

এখন main.js ফাইলে হ্যান্ডলার প্রপার্টি দিয়ে ইভেন্ট লিখব:

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." } const button = document.getElementById("button") button.onclick = submitForm;

কোড রান করুন এবং বাটনে ক্লিক করলে আগের মতোই ফলাফল আসবে। পার্থক্য হলো ইভেন্ট হ্যান্ডলার এখন আলাদা জাভাস্ক্রিপ্ট ফাইলে আছে, HTML-এ নয়। এটি কোডকে আরও মেইনটেইনেবল করে তোলে।

ইভেন্ট লিসেনার

ইভেন্ট লিসেনার জাভাস্ক্রিপ্টে ইভेंट ডিক্লেয়ার করার আরেকটি পদ্ধতি। লিসেনারها সবসময় এলিমেন্টের অবস্থা পরিবর্তন চেক করে, পরিবর্তন হলে সংযুক্ত কোড এক্সিকিউট করে।

উদাহরণস্বরূপ, যখন একটি বাটনে ক্লিক করা হয় যা ইভেন্ট লিসেনারের সাথে যুক্ত, লিসেনারটি "শুনে" যে মাউস ইভেন্টটি ট্রিগার হয়েছে। তারপর সেটি সংযুক্ত কোডটি রান করে।

HTML কোড আগের মতোই থাকবে, main.js ফাইলে ছোট্ট পরিবর্তন আনব:

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." } const button = document.getElementById("button") button.addEventListener("click", submitForm);

এখানে addEventListener ব্যবহার করে ইভেন্ট লিসেনার তৈরি করা হয়েছে। এটি onclick প্রপার্টির বিকল্প। "click" নির্দিষ্ট করে বলা হয়েছে যে মাউস পয়েন্টারের ক্লিক ইভেন্টটি শোনা হবে। ক্লিক ছাড়াও কীবোর্ড ইভেন্ট ইত্যাদি রয়েছে, কিন্তু এই টিউটোরিয়ালে মাউস ক্লিক ইভেন্টের ওপর ফোকাস করা হয়েছে।

কোড রান করুন এবং বাটনে ক্লিক করুন। আউটপুট আগের দুটি উদাহরণের মতোই হবে, কিন্তু এইবার আমরা HTML ইভেন্ট লিসেনার ব্যবহার করেছি। ইভেন্ট লিসেনার হলো জাভাস্ক্রিপ্টে ইভেন্ট ডিক্লেয়ার করার সবচেয়ে আধুনিক এবং সবচেয়ে জনপ্রিয় পদ্ধতি।

উপসংহার

জাভাস্ক্রিপ্ট ইভেন্ট আপনার ওয়েব পেজকে ইন্টারেক্টিভ করে তোলে। বাটন প্রেস, ফর্ম সাবমিট, টেক্সটের ওপর হোভার — যেকোনো ক্রিয়া একটি ইভেন্ট ট্রিগার করতে পারে। জাভাস্ক্রিপ্টে ইভেন্ট ডিক্লেয়ার করার তিনটি পদ্ধতি রয়েছে: ইনলাইন, প্রপার্টি, এবং লিসেনার।

এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো জাভাস্ক্রিপ্টে ইভেন্ট তৈরি করার জন্য প্রস্তুত!