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

এখন আমি জাভাস্ক্রিপ্ট ইভেন্ট নিয়ে আলোচনা করবো । প্রথমে আমরা আলোচনা করি জাভাস্ক্রিপ্ট ইভেন্ট কি?

ইভেন্ট (Event) শব্দের অর্থ ঘটনা । আমরা ডাইনামিক ওয়েবসাইট এ বিভিন্ন ধরনের ঘটনা ঘটতে দেখি । এসব ঘটনা-ই হচ্ছে ইভেন্ট । অর্থাৎ, কোন ইলিমেন্ট এর উপর মাউস দিয়ে ক্লিক করা, ফর্ম এ কোন কিছু টাইপ করা, কোন ইলিমেন্ট এর উপর হোভার করা প্রত্যেকটি একটি করে ইভেন্ট । জাভাস্ক্রিপ্ট এ ইভেন্ট একটি অত্যন্ত গুরুত্বপূর্ণ আলোচনা ।

একটি উদাহরণ দেখুন । এজন্য নিচের কোডটুকু নোটপ্যাড প্লাস প্লাস এ লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> JavaScript Event </title>
    <script type="text/javascript">
        function popup() {
            alert("I am Jihadur Rahman")
            }
    </script>
</head>
<body>
    <input type="button" onclick="popup()" value="Click Here" />
</body>
</html>

এবার index.html ফাইলটি যেকোনো ব্রাউজার দিয়ে রান করালে Click Here নামে একটা বাটন দেখতে পারবেন । এই বাটন এ ক্লিক করলে “I am Jihadur Rahman” লেখাটি দেখাবে ।

একটা কথা খেয়াল রাখবেন, আপনি যদি জাভাস্ক্রিপ্ট কোড script>… ট্যাগ এর মাঝে না লিখেন তাহলে জাভাস্ক্রিপ্ট কোডটি কাজ করবেনা । তাই, প্রথম প্রথম একটু সাবধানে কাজ করবেন । পরে ধীরে ধীরে তা ঠিক হয়ে যাবে । সুতরাং, জাভাস্ক্রিপ্ট এর বেসিক আলোচনা সমূহ সব সময় খেয়াল রাখবেন ।

এখানে onclick হচ্ছে ইভেন্ট হ্যান্ডেলার । জাভাস্ক্রিপ্ট এর কিছু ফাংশন আছে, এসব ফাংশন এ কোন ইভেন্ট ঘটালে ফাংশনটি কার্যকর হয় । এসব ফাংশন কে আমরা বলতে পারি ইভেন্ট হ্যান্ডেলার । আমি এখন কিছু গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট এর ইভেন্ট নিয়ে আলোচনা করবো । এসব ইভেন্টের মধ্যে রয়েছে;

  • onsubmit
  • onmouseover
  • onfocus
  • onclick
  • onmouseout
  • onmousemove
  • onselect
  • ondbclick
  • onload
  • onresize

এবার আমি এসব জাভাস্ক্রিপ্ট ইভেন্ট নিয়ে বিস্তারিত আলোচনা করবো । জাভাস্ক্রিপ্ট ইভেন্ট এর বর্ণনা নিচের ছকে আলোচনা করা হলঃ

ইভেন্ট বর্ণনা
onsubmit কোন ফর্ম সাবমিট করার আগে, ফর্ম এর ফিল্ড সমূহ যাচাই করার জন্য onsubmit ইভেন্ট ব্যবহার করা হয় । যদি ফর্ম এর ফিল্ড যথাযথ ভাবে পূর্ণ হয় তাহলে ফর্মটি সাবমিট করবে । আর যদি ফর্ম এর ফিল্ড যথাযথ ভাবে পূর্ণ হয় তাহলে ফর্মটি সাবমিট করবে না ।
onmouseover সাধারণত Animated Button তৈরি করা করার জন্য onmouseover ইভেন্ট ব্যবহার করা হয় ।
onfocus যখন ফর্ম ইলিমেন্ট এ ফোকাস হবে তখন onfocus ইভেন্টটি কার্যকর হবে ।
onclick ওয়েবসাইটের কোন ইলিমেন্ট এ ক্লিক করলে onclick ইভেন্ট কার্যকর হবে । এটা মূলত মাউস ইভেন্ট ।
onmouseout এটাও onmouseover এর মত Animated Button তৈরি করা করার জন্য ব্যবহার করা হয় ।
onmousemove যখন মাউসের কার্সর মুভ করা হবে অর্থাৎ স্থানান্তর করা হবে তখন onmousemove ইভেন্ট রান হবে । এটাও একটা মাউস ইভেন্ট ।
onselect যখন কোন ইলিমেন্ট সিলেক্ট অর্থাৎ বাছাই করা হবে তখন onselect ইভেন্ট রান হবে ।
ondbclick ওয়েবসাইটের কোন ইলিমেন্ট এ ডাবল ক্লিক (Dubble Click) করলে ondbclick ইভেন্ট কার্যকর হবে । এটা মূলত মাউস ইভেন্ট ।
onload ওয়েবসাইট সম্পূর্ণ লোড হলে onload ইলিমেন্ট রান হয় ।
onresize যখন উইন্ডো রিসাইজ করা হয় তখন onresize ইভেন্ট রান হয়ে থাকে ।

এখানে ব্যবহৃত onsubmit, onmouseover, onfocus, onclick, onmouseout, onmousemove, onselect, ondbclick, onload, onresize প্রত্যেকটি ওয়ার্ডকে ইভেন্ট হ্যান্ডেলার বলা হয়ে থাকে ।

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

Series Navigation<< জাভাস্ক্রিপ্ট ফাংশনজাভাস্ক্রিপ্ট পপ-আপ বক্স >>

Leave a Reply

Your email address will not be published. Required fields are marked *