কোন ওয়েব পেজে ব্যবহারকারী অর্থাৎ user কখনও মাউস ক্লিক করে, তা হতে পারে কোন একটা লিংক বা যেকোন কিছুর উপর, কিবোর্ড দিয়ে টাইপ করে যেমন - কোন ফর্ম এর ক্ষেত্রে, কখনও কোন এইচটিএমএল এলিমেন্টের উপর মাউস নিয়ে যেতে অর্থাৎ মাউস হোভার করতে পারে।
এটি হতে পারে কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা অন্য যে কোন কিছুর উপরে। এগুলিই হল এক একটি যেক্যুয়েরী ইভেন্ট।
Event এর বাংলা আভিধানিক অর্থ হল ঘটনা। প্রোগ্রামিং এর ক্ষেত্রেও এটি একই অর্থে বাবুহার করা হয়। যেমন কোন একটি প্যারাগ্রাফ বা বাটনের উপর ক্লিক করার ফলে, একটি ইভেন্ট (ক্লিক ইভেন্ট) সংঘটিত হয়। এ রকম কোন একটি এইচটিএমএল এলিমেন্টের উপর মাউস নিয়ে যাওয়ার ফলে একটি ইভেন্ট অর্থাৎ মাউস হোভার ইভেন্ট সংঘটিত হয়। এরুপ আরো অনেক যেক্যুয়েরী ইভেন্ট রয়েছে যেমন scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।
যেক্যুয়েরী এর মাধ্যমে খুব সহজেই আনেক ধরনের ইভেন্ট তৈরি করা যায়। এতে বিভিন্ন প্রকারের ইভেন্ট তৈরি হতে পারে, নিচে কিছু ইভেন্ট এর প্রকারভেদ দেখুন।
যখন একটি ইভেন্ট ঘটে, তখন একে প্রোগ্রামিং এর ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট হ্যান্ডলার এর অভ্যন্তরে থাকা কোড গুলো কাজ করে অর্থাৎ execute হয়। যেমন কোন একটি এইচটিএমএল এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করি তবে, ঐ এলিমেন্টটি ওয়েব পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোড গুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে এর ভিতরের কোড কাজ করবে না বরং অপেক্ষা করবে। সাধারনত যেক্যুয়েরী কোডের শুরুতেই এই ইভেন্ট হ্যান্ডলার ব্যবহার করা হয় অর্থ্যাৎ পুরো ওয়েব পেজ সম্পূর্ন লোড হবে তারপর যেক্যুয়েরী এর অন্য সব কোডগুলো কাজ করা শুরু করবে।
যেক্যুয়েরী এর ইভেন্ট হ্যান্ডলার ব্যবহার করে নিচে একটি উদাহরণ দেখুন।
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
একই কথা অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমন " $("button").click(function(){ " এভাবে থাকলে এর অর্থ হচ্ছে button এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড কাজ করবে অর্থাৎ execute কবে।
নিচে একটি তালিকা দেখুন, যেখানে যেক্যুয়েরী এর সকল ইভেন্ট হ্যান্ডলার মেথড গুলো উল্লেখ করা হয়েছে।
| মেথড | বর্ণনা |
|---|---|
| bind() | এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। 3.0 সংস্করণে বাদ এর তালিকায় রাখা হয়েছে, এই ইভেন্ট হ্যান্ডলার এর পরিবর্তে on() মেথড ব্যবহার করাই ভাল। |
| blur() | নির্ধারিত এইচটিএমএল এলিমেন্টে blur ইভেন্ট সংযুক্ত করে। |
| change() | নির্ধারিত এইচটিএমএল এলিমেন্টে change ইভেন্ট সংযুক্ত করে। |
| click() | নির্ধারিত এইচটিএমএল এলিমেন্টে click ইভেন্ট সংযুক্ত করে। |
শেয়ার করুন
