জেকুয়েরি ইভেন্ট মেথড

0
10
jquery
jquery

ইভেন্ট কি?

সকল ভিজিটরের ভিন্ন ভিন্ন কার্যকলাপে ওয়েবপেজ যে রেসপন্স করতে পারে তাকি ইভেন্ট বলে।

একটি ইভেন্ট একটি যথার্থ সময়কে রিপ্রেজেন্ট করে যখন কোন কিছু ঘটে।

উদাহরণ:

  • একটি এলিমেন্টের উপর মাউস নড়াচড়া করা
  • একটি রেডিও বাটন সিলেক্ট করা
  • একটি এলিমেন্টের উপর ক্লিক করা

“fires/fired” টার্মটি প্রায়ই ইভেন্টের সাথে ব্যবহৃত হয়। উদাহরণ: “keypress ইভেন্টটি সম্পন্ন হয়, যখন আপনি একটি কী চাপ দেন”।

কিছু কমন ডোম ইভেন্ট নিম্নে দেওয়া হলো:

মাউস ইভেন্ট কী-বোর্ড ইভেন্ট ফরম ইভেন্ট ডকুমেন্ট/উইন্ডো ইভেন্ট
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

ইভেন্ট মেথডের জন্য জেকুয়েরির সিনট্যাক্স

জেকুয়েরিতে, বেশিরভাগ ডোম ইভেন্টেরই সমতুল্য জেকুয়েরি মেথড রয়েছে।

একটি পেজের সকল প্যারাগ্রাফের জন্য click ইভেন্ট assign করার জন্য, আপনি নিম্নলিখিত পদ্বতিটি অনুসরন করতে পারেন:

$(“p”).click();

তার পরবর্তী স্টেপ হলো যখন ইভেন্টটি সম্পন্ন হবে তখন কি ঘটবে তা নির্ধারণ করা। আপনাকে অবশ্যই ইভেন্টের মধ্যে একটি ফাংশন পাস করাতে হবে:

$(“p”).click(function(){
// কি ঘটবে তা এখানে লিখতে হবে!!
});

সাধারনভাবে ব্যবহৃত জেকুয়েরি ইভেন্ট মেথড সমূহ

$(document).ready()

$(document).ready() মেথডের মাধ্যমে যখন ডকুমেন্ট সম্পূর্ণ লোড হয় তখন একটি ফাংশন এক্সিকিউট করা যায়। এই ইভেন্ট সম্পর্কে ইতিমধ্যেই জেকুয়েরি সিনট্যাক্স অধ্যায়ে আলোচনা করা হয়েছে।

click()

click() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন একজন ইউজার একটি এইচটিএমএল এলিমেন্টের মধ্যে ক্লিক করে তখন ফাংশন এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে, যখন <p> এলিমেন্টে click ইভেন্ট সম্পন্ন হয় তখন ঐ <p> এলিমেন্টটি হাইড হয়ে যায়:

উদাহরণ

$(“p”).click(function(){
$(this).hide();
});

নিজে চেষ্টা করি »

dblclick()

dblclick() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন একজন ইউজার একটি এইচটিএমএল এলিমেন্টের মধ্যে ডাবল-ক্লিক করে তখন ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“p”).dblclick(function(){
$(this).hide();
});

নিজে চেষ্টা করি »

mouseenter()

mouseenter() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন মাউসের পয়েন্টার এইচটিএমএল এলিমেন্টের মধ্যে নিয়ে আসা হয় তখন ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“#p1”).mouseenter(function(){
alert(“আপনি p1 এর মধ্যে মাউস পয়েন্টার প্রবেশ করিয়েছেন!”);
});

নিজে চেষ্টা করি »

mouseleave()

mouseleave() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন মাউসের পয়েন্টার এইচটিএমএল এলিমেন্টের মধ্য থেকে সরিয়ে নেয়া হয় তখন ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“#p1”).mouseleave(function(){
alert(“বিদায়! আপনি p1 এর মধ্য থেকে মাউস পয়েন্টার সরিয়ে নিয়েছেন!”);
});

নিজে চেষ্টা করি »

mousedown()

mousedown() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

মাউস পয়েন্টার এইচটিএমএল এলিমেন্টের উপর থাকা অবস্থায় মাউসের বাম, মধ্য অথবা ডান বাটনে চাপ দিলে ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“#p1”).mousedown(function(){
alert(“p1 এলিমেন্টের উপর মাউসের বাটন চাপা হয়েছে!”);
});

নিজে চেষ্টা করি »

mouseup()

mouseup() মেথড একটি এইচটিএমএল এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

মাউস পয়েন্টার এইচটিএমএল এলিমেন্টের উপর থাকা অবস্থায় মাউসের বাম, মধ্য অথবা ডান বাটনে চাপ দিয়ে ছেড়ে দিলে ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“#p1”).mouseup(function(){
alert(“p1 এলিমেন্টের উপর মাউসের বাটন চেপে ছেড়ে দেয়া হয়েছে!”);
});

নিজে চেষ্টা করি »

hover()

The hover() মেথড mouseenter() এবং mouseleave() মেথডের সমন্বয়ে গঠিত একটি মেথড এবং এটি দুটি ফাংশন নিয়ে কাজ করে।

যখন এইচটিএমএল এলিমেন্টের মধ্যে মাউসের পয়েন্টার প্রবেশ করানো হয় তখন প্রথম ফাংশনটি এক্সিকিউট হয় এবং যখন মাউস সরিয়ে নেয়া হয় তখন দ্বিতীয় ফাংশনটি এক্সিকিউট হয়:

উদাহরণ

$(“#p1”).hover(function(){
alert(“আপনি p1 এলিমেন্টের মধ্যে মাউসের পয়েন্টার প্রবেশ করিয়েছেন!”);
},
function(){
alert(“বিদায়! আপনি এখন p1 এলিমেন্ট থেকে মাউসের পয়েন্টার সরিয়ে নিয়েছেন!”);
});

নিজে চেষ্টা করি »

focus()

focus() মেথড একটি এইচটিএমএল এলিমেন্ট ফরম ফিল্ডের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন ফরম ফিল্ড ফোকাস হয় তখন ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“input”).focus(function(){
$(this).css(“background-color”, “#cccccc”);
});

নিজে চেষ্টা করি »

blur()

blur() মেথড একটি এইচটিএমএল এলিমেন্ট ফরম ফিল্ডের সাথে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে।

যখন ফরম ফিল্ড ফোকাস হারায় তখন ফাংশন এক্সিকিউট হয়:

উদাহরণ

$(“input”).blur(function(){
$(this).css(“background-color”, “#ffffff”);
});

নিজে চেষ্টা করি »


on() মেথড

on() মেথড সিলেক্ট করা এলিমেন্টে এক বা তার অধিক ইভেন্ট হ্যান্ডলার সংযুক্ত করে।

<p> এলিমেন্টের মধ্যে click ইভেন্ট সংযুক্ত করি:

উদাহরণ

$(“p”).on(“click”, function(){
$(this).hide();
});

নিজে চেষ্টা করি »

<p> এলিমেন্টে একাধিক ইভেন্ট হ্যান্ডলার সংযুক্ত করি:

উদাহরণ

$(“p”).on({
mouseenter: function(){
$(this).css(“background-color”, “lightgray”);
},
mouseleave: function(){
$(this).css(“background-color”, “lightblue”);
},
click: function(){
$(this).css(“background-color”, “yellow”);
}
});

নিজে চেষ্টা করি »


জেকুয়েরি ইভেন্ট মেথড

সম্পূর্ণ ইভেন্ট রেফারেন্সের জন্য, আমাদের জেকুয়েরি ইভেন্ট রেফারেন্স পেজে ভিজিট করুন।

LEAVE A REPLY

Please enter your comment!
Please enter your name here