জেকোয়েরি ইভেন্ট হ্যান্ডলার (jQuery Event Handler Tutorial in Bangla)

 

ইভেন্ট:

===========================

ওয়েব পেজে ইউজার কখনও মাউস ক্লিক করে(কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে (মাউস হোভার) পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমন কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট (মাউস হোভার ইভেন্ট)। এরুপ আরো ইভেন্ট আছে যেমন scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।

 

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

====================

ওয়েব পেজে এমন অনেক ইভেন্ট ঘটে, এই ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জেকোয়েরির কোড এক্সিকিউট করাতে পারি। জেকোয়েরিতে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। ready(), click(), hover() এরুপ আরো অনেক ইভেন্ট হ্যান্ডলার আছে। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট হ্যান্ডলার এর ভিতর কোড এক্সিকিউট হয়। যেমন এর আগের টিউটোরিয়ালের প্রথম উদাহরনে p তে ক্লিক হওয়ার সাথে সাথে click() এর ভিতরের কোড রান করেছে (একটা এলার্ট হবে এরুপ কোড)

 

কোন একটা এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করেন তাহলে ঐ এলিমেন্টটি পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোডগুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে এর ভিতরের কোড কাজ করবেনা বরং অপেক্ষা করবে। সাধারনত জেকোয়েরির কোডের শুরুতেই এই হ্যান্ডলার ব্যবহার করে অর্থ্যাৎ পুরো পেজ সম্পূর্ন লোড হবে এরপর জেকোয়েরির অন্যসব কোডগুলি কাজ করা শুরু করবে। এটাও এর আগের টিউটোরিয়ালে দেখানো হয়েছে।

 

অনুরুপ অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমন $('#test').click() এভাবে থাকলে এর অর্থ হচ্ছে test আইডি সম্বলিত এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড এক্সিকিউট হবে।

 

এখন উপরের এই প্যারাগ্রাফটির click এর জায়গায় hover শব্দটি প্রতিস্থাপন করুন অথবা যেকোন ইভেন্ট হ্যান্ডলার এর নাম প্রতিস্থাপন করুন এবং লাইনটি পড়ুন।;)

 

কিছু বহুল ব্যবহৃত ইভেন্ট এবং ইভেন্ট হ্যান্ডলার (জেকোয়েরি) এর তালিকা

ইভেন্ট	ইভেন্ট হ্যান্ডলার
ready	এটা ডকুমেন্ট ইভেন্ট। একটা ডকুমেন্ট (পেজ) সম্পূর্ন লোড হয়ে রেডি হলে এরপর এই ইভেন্ট ফায়ার হয়। সাধারনত সব জেকোয়েরির কোড এই ইভেন্ট হ্যান্ডলার এর ভিতরে থাকে কারন আমরা চাই, পেজ রেডি হওয়ার পর আমাদের অন্যান্য জেকোয়েরি কাজ শুরু করুক। $(document).ready(function(){//code..});
click	যেকোন এলিমেন্টে ক্লিক করলে এই ইভেন্ট ফায়ার হবে। যেমন "test" আইডি সম্বিলত এলিমেন্টে ক্লিক করলে যদি কিছু করতে চাই তাহলে $('#test').click(function(){any jQuery code here});
submit	যেকোন ফর্ম সাবমিট করলে submit ইভেন্ট ফায়ার হবে। যেমন "test" আইডি সম্বিলত ফর্ম সাবমিট করলে যদি কিছু করতে চাই তাহলে $('#test').submit(function(){any jQuery code here});
blur	এটাও একটা ফর্ম ইভেন্ট, ইনপুট বক্স (ফর্ম এলিমেন্ট) থেকে মাউস সরিয়ে অন্য কোথাও ক্লিক করলে (ফোকাস চলে যাবার সাথে সাথে) blur ইভেন্ট ফায়ার হয়। যেমন "test" আইডি ইনপুট বক্সে ব্লার করলে যদি কিছু করতে চাই তাহলে $('#test').blur(function(){any jQuery code here});
change	ফর্ম ইভেন্ট। ফর্ম এলিমেন্টের মান (যেমন ড্রপ ডাউন অপশন) পরিবর্তন করার সময় ফায়ার হয়। যেমন "test" আইডি সম্বিলত ড্রপডাউন থেকে অপশন পরিবর্তন করলে যদি কিছু করতে চাই তাহলে $('#test').change(function(){any jQuery code here});
focus	ফর্ম ইভেন্ট। ফর্ম এলিমেন্টে যখন ফোকাস হবে তখন ফায়ার হয়। যেমন "test" আইডি সম্বিলত এলিমেন্টে মাউস ফোকাস করলে যদি কিছু করতে চাই তাহলে $('#test').focus(function(){any jQuery code here});
select	যেকোন এলিমেন্ট সিলেক্ট করার সময়ই ফায়ার হয়। যেমন "test" আইডি সম্বিলত এলিমেন্ট সিলেক্ট করলে যদি কিছু করতে চাই তাহলে $('#test').select(function(){any jQuery code here});।
dblclick	এটা মাউস ইভেন্ট। কোন এলিমেন্টে ডাবল ক্লিক করলে এটা ফায়ার হবে। যেমন "test" আইডি সম্বিলত এলিমেন্টে ডাবল ক্লিক করলে যদি কিছু করতে চাই তাহলে $('#test').dblclick(function(){any jQuery code here});
mouseover	মাউস ইভেন্ট। কোন এলিমেন্টের উপর মাউস নিয়ে গেলে ফায়ার হয়। যেমন "test" আইডি সম্বিলত এলিমেন্টে মাউস হোভার করলে যদি কিছু করতে চাই তাহলে $('#test').hover(function(){any jQuery code here});
load	এটা উইন্ডো ইভেন্ট। ফায়ার হয় যখন পেজ লোড শেষ হয়। যেমন উইন্ডো লোড হলে যদি কিছু করতে চাই $(window).load(function(){any jQuery code here});
resize	এটাও উইন্ডো ইভেন্ট। ফায়ার হয় যদি উইন্ডো রিসাইজ করা হয় তখন। যেমন উইন্ডো রিসাইজ করার সময় যদি কিছু করতে চাই $(window).resize(function(){any jQuery code here});

 আরও অনেক ইভেন্ট এবং তাদের সংশ্লিষ্ট ইভেন্ট হ্যান্ডলার আছে। উপরে শুধু গুরত্বপূর্নগুলি আলোচনা করা হয়েছে।