জেকোয়েরি একাধিক ইভেন্টে একই হ্যান্ডলার ব্যবহার (jQuery bind method)

 



ধরুন আপনি চান যে একটা ফাংশন এক্সিকিউট হোক যখন কেউ আপনার সাইটের Go বাটনে ক্লিক করবে অথবা এই বাটনের উপর মাউস নিয়ে গেলেও এই একই ফাংশন এক্সিকিউট হবে।অর্থ্যাৎ দুটি ইভেন্টে একই ফাংশন চলবে।bind মেথড দিয়ে এটা করা যায়।একসাথে যতগুলি ইচ্ছা ইভেন্ট স্পেস দিয়ে লিখবেন এরপর যেকোন ফাংশন লিখবেন।যেমন

index.html ফাইল

01.<!doctype html>
02. 
03.<head>
04. 
05.<title>codestrickz Jquery tutorials!</title>
06.<link rel="stylesheet" href="/style.css" type="text/css"/>
07. 
08.<script src="/jquery_latest.js" type="text/javascript"></script>
09.<script src="/script.js" type="text/javascript"></script>
10.</head>
11.<body>
12.<h2 class="myheader">JQUERY tutorials</h2>
13.<p>codestrickz is nice tutorial site</p>
14.</body>
15.</html>

css ফাইল

1..changeColor{
2.background:#ddd;
3.color:#000;
4.font-weight:bold;
5.}

script.js ফাইল

1.$(document).ready(function(){
2.$('.myheader').bind('click mouseenter mouseleave',function(){
3.$(this).toggleClass('changeColor');
4.});
5.});

আউটপুট:

JQUERY tutorials

codestrickz is nice tutorial site

ব্যাখ্যা:myheader ক্লাস সম্বলিত হেডারে এখন মাউস হোভার,ক্লিক বা মাউস সরিয়ে নিয়ে আসলে changeColor নামে একটি টগল ক্লাস যুক্ত হবে।আপনি চাইলে আরও ইভেন্ট এভাবে স্পেস দিয়ে সবগুলির জন্য এই ফাংশনটি চালাতে পারেন।


*এই মেথডের বড় সুবিধা হচ্ছে কোড কম লিখতে হয়।যদি উপরের কোডটুকুই নিচের মত লিখতেন তাহলে এখানে তিনটি ইভেন্টের জন্য তিনবার একই কোড লিখতে হত।

1.$(document).ready(function(){
2.$('.myheader').click(function(){
3.$(this).toggleClass('changeColor');
4.});
5.});

*toggleClass() মেথড দিয়ে এভাবে এমন একটি ক্লাস যোগ করা যায় (সিলেক্টেড এলিমেন্টে) যেটা প্রথমবার ক্লিক করলে ক্লাসটি (এখানে changeColor) যোগ হবে এবং পরেরবার ক্লিক করলে মুছে যাবে।এরুপ অন্যান্য ইভেন্টের ক্ষেত্রেও।


unbind() মেথড:

bind মেথড দিয়ে যে হ্যান্ডলার টি যুক্ত হয়, unbind মেথড দিয়ে সেটা সরানো যায়।যেমন

index.html

01.<!doctype html>
02. 
03.<head>
04. 
05.<title>codestrickz Jquery tutorials!</title>
06.<link rel="stylesheet" href="/style.css" type="text/css"/>
07. 
08. 
09.<script src="/jquery_latest.js" type="text/javascript" ></script>
10.<script src="/script.js" type="text/javascript"></script>
11.</head>
12.<body>
13.<h2>JQUERY tutorials</h2>
14.<p class="myPara">codestrickz provide massive tutorials on Web Development</p>
15.<button id="buttonA">Binder</button>
16.<button id="buttonB">UnBinder</button>
17.</body>
18.</html>

css ফাইল

1..changeColor{
2.background:#ddd;
3.color:#000;
4.font-weight:bold;
5.}

script.js ফাইল

01.$(document).ready(function(){
02.function handlerFn(){
03.$('.myPara').toggleClass('changeColor');
04.}
05.$('#buttonA').click(function(){
06.$('.myPara').bind('click mouseenter mouseleave',handlerFn);
07.});
08.$('#buttonB').click(function(){
09.$('.myPara').unbind('click mouseenter mouseleave',handlerFn);
10.});
11.});


buttonA তে ক্লিক করলে myPara ক্লাস সম্বলিত প্যারাগ্রাফে ৩টি ইভেন্ট bind করেছি এবং এই ৩টি ইভেন্টের যেকোনটি ঘটলে handlerFn নামে ফাংশনটি এক্সিকিউট হবে।আর buttonB তে ক্লিক করলে হ্যান্ডলার ফাংশনটি unbind হবে অর্থ্যাৎ এখন আর প্যারাগ্রাফের উপর ৩টি ইভেন্টের যেটিই ঘটুকনা কেন,কোন কাজ হবেনা।আপনি ইচ্ছে করলে ৩টি ইভেন্ট থেকে শুধু ২/১ টি unbind করতে পারেন।যেটা যেটা unbind করবেন তাদের নাম স্পেস দিয়ে লিখলেই হবে।

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.