jQuery Event Handler Tutorial in Bangla In Jquery Tutorials

Event:

 

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

Event Handler: ====================

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

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

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

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

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

Event    ইভেন্ট Handlar

ready    এটা ডকুমেন্ট ইভেন্ট। একটা ডকুমেন্ট (পেজ) সম্পূর্ন লোড হয়ে রেডি হলে এরপর এই ইভেন্ট ফায়ার হয়। সাধারনত সব জেকোয়েরির কোড এই ইভেন্ট হ্যান্ডলার এর ভিতরে থাকে কারন আমরা চাই, পেজ রেডি হওয়ার পর আমাদের অন্যান্য জেকোয়েরি কাজ শুরু করুক। $(document).ready(function(){//code..});

click        যেকোন এলিমেন্টে 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 form  Event। Form এলিমেন্টের মান (যেমন ড্রপ ডাউন অপশন) পরিবর্তন করার সময় ফায়ার হয়। যেমন "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" ID সম্বিলত এলিমেন্টে ডাবল ক্লিক করলে যদি কিছু করতে চাই তাহলে $('#test').dblclick(function(){any jQuery code here});

mouseover         Mouse ইভেন্ট। কোন এলিমেন্টের উপর মাউস নিয়ে গেলে ফায়ার হয়। যেমন "test" ID সম্বিলত এলিমেন্টে Mouse Hover করলে যদি কিছু করতে চাই তাহলে $('#test').hover(function(){any jQuery code here});

load       এটা উইন্ডো ইভেন্ট। ফায়ার হয় যখন পেজ লোড শেষ হয়। যেমন উইন্ডো লোড হলে যদি কিছু করতে চাই $(window).load(function(){any jQuery code here});

resize    এটাও উইন্ডো ইভেন্ট। ফায়ার হয় যদি উইন্ডো রিসাইজ করা হয় তখন। যেমন উইন্ডো Resize করার সময় যদি কিছু করতে চাই $(window).resize(function(){any jQuery code here});

 

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