স্যাট একাডেমী
শিক্ষা নিয়ে বাণিজ্য নয়, আসুন শিক্ষা বাণিজ্যকে "না" বলি।
Facebook Twitter Google LinkedIn
☰ জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
টিউটোরিয়াল
 

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

একটি ওয়েব পেজে এইচটিএমএল ইভেন্ট এর সাথে জেকুয়েরি ইভেন্ট মেথড রেসপন্স করানোর জন্য জেকুয়েরিকে বিশেষ ভাবে ডিজাইন করা হয়েছে।

ইভেন্ট কি?

ওয়েব পেজে ব্যবহারকারীর এক একটি কার্যকলাপই ইভেন্ট হিসাবে গন্য করা হয়। আর জেকুয়েরি এই সকল ইভেন্টে নিপুণভাবে রেসপন্স করতে পারে।

উদাহরণঃ

  1. একটি এলিমেন্টের উপর মাউস নড়াচড়া করা
  2. একটি রেডিও বাটন সিলেক্ট করা -
  3. একটি এলিমেন্টের উপর ক্লিক করা

নিম্নে কিছু সাধারণ ডোম(DOM) ইভেন্ট দেওয়া হলোঃ

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

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

জেকুয়েরিতে, অধিকাংশ ডোম ইভেন্টেরই সমতুল্য জেকুয়েরি মেথড রয়েছে। এখন আমরা click ইভেন্ট মেথডের ইভেন্ট সম্পর্কে জানবো।

একটি পেজের সকল প্যারাগ্রাফের জন্য click ইভেন্ট মেথডটি নির্ধারণ করতে নিম্নলিখিত সিন্টেক্সটি অনুসরন করুনঃ

$("p").click();

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

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

});

অধিকাংশ ক্ষেত্রে ব্যবহৃত জেকুয়েরি ইভেন্ট মেথড

$(document).ready()

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

click()

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

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে click ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী ক্লিক করলে <p> এলিমেন্ট সমুহ হাইড হয়ে যাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>জেকুয়েরি  উদাহরণ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });
    </script>
</head>
<body>

    <p>আপনি যদি আমার উপরে ক্লিক করেন, তাহলে আমি অদৃশ্য হয়ে যাবো।</p>
    <p>আমাকে ক্লিক করুন!</p>
    <p>আমাকেও ক্লিক করুন!</p>

</body>
</html>

ফলাফল

dblclick()

dblclick() মেথডটি একটি এইচটিএমএল এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। যখন একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপরে ডাবল-ক্লিক করে তখন ফাংশনটি এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে dblclick ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী ডাবল-ক্লিক করলে <p> এলিমেন্ট-সমুহ হাইড বা অদৃশ্য হয়ে যাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি  উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("p").dblclick(function(){
          $(this).hide();
      });
  });
  </script>
</head>
<body>

  <p>এটিতে ডাবল-ক্লিক করলে, এটি অদৃশ্য হয়ে যাবে।</p>
  <p>এটিতেও ক্লিক করুন!</p>
  <p>এটিতেও ক্লিক করুন!</p>

</body>
</html>

ফলাফল

mouseenter()

mouseenter() মেথডটি একটি এইচটিএমএল এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। যখন একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপরে মাউসের পয়েন্টারটি নিয়ে আসে তখন ফাংশনটি এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে mouseenter ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী মাউস পয়েন্টার <p> এলিমেন্টের উপর আনলে একটি এলার্ট(alert) প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি  উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("#paragraph").mouseenter(function(){
          alert("আপনি প্যারাগ্রাফের মধ্যে মাউস পয়েন্টার প্রবেশ করিয়েছেন!");
      });
  });
  </script>
</head>
<body>

  <p id="paragraph">একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

mouseleave()

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

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে mouseleave ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী মাউস পয়েন্টার <p> এলিমেন্টের উপর থেকে সরিয়ে আনলে একটি এলার্ট(alert) প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("#paragraph").mouseleave(function(){
          alert("বিদায়! আপনি প্যারাগ্রাফের মধ্য থেকে মাউস পয়েন্টার সরিয়ে নিয়েছেন!");
      });
  });
  </script>
</head>
<body>

  <p id="paragraph">একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

mousedown()

mousedown() মেথডটি একটি এইচটিএমএল এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপর মাউসের যেকোনো একটি বাটন প্রেস(pressed) করলে ফাংশন এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে mousedown ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী মাউসের যেকোনো একটি বাটন <p> এলিমেন্টের উপর প্রেস করলেই একটি এলার্ট(alert) প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("#paragraph").mousedown(function(){
          alert("প্যারাগ্রাফের উপর মাউস বাটনে চাপ দেওয়া হয়েছে!");
      });
  });
  </script>
</head>
<body>

  <p id="paragraph">একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

mouseup()

mouseup() মেথডটি একটি এইচটিএমএল এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপর মাউসের যেকোনো একটি বাটন প্রেস(press) করে ছেড়ে দিলে ফাংশনটি এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে mouseup ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী মাউসের যেকোনো একটি বাটন <p> এলিমেন্টের উপর প্রেস করে ছেড়ে দিলেই একটি এলার্ট(alert) প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("#paragraph").mouseup(function(){
          alert("প্যারাগ্রাফ এলিমেন্টের উপর প্রেসকৃত মাউস বাটন ছেড়ে দেয়া হয়েছে!");
      });
  });
  </script>
</head>
<body>

  <p id="paragraph">একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

hover()

hover() মেথডটি mouseenter() এবং mouseleave() এই দুই মেথডের সমন্বয়ে গঠিত এবং এটি দুটি ফাংশন নিয়ে কাজ করে। যখন একজন ব্যবহারকারী এইচটিএমএল এলিমেন্টের উপরে মাউস পয়েন্টার প্রবেশ করায় হয় তখন প্রথম ফাংশনটি এক্সিকিউট হয় এবং যখন মাউস পয়েন্টারটি সরিয়ে নেয় তখন দ্বিতীয় ফাংশনটি এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <p> এলিমেন্টে hover ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী <p> এলিমেন্টের উপরে মাউস পয়েন্টার প্রবেশ করালে একটি এলার্ট(alert) প্রদর্শিত হবে এবং মাউস পয়েন্টারটি সরিয়ে নিলে ভিন্ন একটি এলার্ট(alert) প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("#paragraph").hover(function(){
          alert("স্বাগতম! আপনি প্যারাগ্রাফে প্রবেশ করেছেন!");
      },
      function(){
          alert("বিদায়! প্যারাগ্রাফ থেকে বের হয়ে গেছেন!");
      });
  });
  </script>
</head>
<body>

  <p id="paragraph">একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

focus()

focus() মেথডটি একটি এইচটিএমএল ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। যখন একজন ব্যবহারকারী একটি এইচটিএমএল ফরম এলিমেন্টের ইনপুট ফিল্ডে ফোকাস করে তখন ফাংশন এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <input> এলিমেন্টে focus ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী ইনপুট ফিল্ডে ফোকাস করলে <input> এলিমেন্টের ব্যাকগ্রাউন্ড-কালার পরিবর্তন হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("input").focus(function(){
          $(this).css("background-color", "#ccc");
      });
      $("input").blur(function(){
          $(this).css("background-color", "#fff");
      });
  });
  </script>
</head>
<body>

  নামঃ <input type="text" name="name"><br>
  ইমেইলঃ <input type="text" name="email">

</body>
</html>

ফলাফল

blur()

blur() মেথডটি একটি এইচটিএমএল ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। যখন একজন ব্যবহারকারী একটি এইচটিএমএল ফরম এলিমেন্টের ইনপুট ফিল্ডে ফোকাস হারায় তখন ফাংশন এক্সিকিউট হয়।

নিম্নলিখিত উদাহরণে <input> এলিমেন্টে blur ইভেন্টটি সম্পন্ন হলে অর্থাৎ ব্যবহারকারী ইনপুট ফিল্ডে ফোকাস হারালে <input> এলিমেন্টের ব্যাকগ্রাউন্ড-কালার পরিবর্তন হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("input").focus(function(){
          $(this).css("background-color", "#ccc");
      });
      $("input").blur(function(){
          $(this).css("background-color", "#fff");
      });
  });
  </script>
</head>
<body>

  নামঃ <input type="text" name="name"><br>
  ইমেইলঃ <input type="text" name="email">

</body>
</html>

ফলাফল

on() মেথড

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

নিম্নলিখিত উদাহরণে আমরা on() মেথড ব্যবহার করে <p> এলিমেন্টে clickইভেন্টটি সংযুক্ত করবো। ব্যবহারকারী <p> এলিমেন্টে ক্লিক করলে <p> এলিমেন্ট সমুহ হাইড হয়ে যাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
      $("p").on("click", function(){
          $(this).hide();
      });
  });
  </script>
</head>
<body>

  <p>আপনি যদি আমার মধ্যে ক্লিক করেন, তাহলে আমি অদৃশ্য হয়ে যাবো।</p>
  <p>আমাকে ক্লিক করুন!</p>
  <p>আমাকেও ক্লিক করুন!</p>

</body>
</html>

ফলাফল

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

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


আমাদের টিউটোরিয়াল সমূহ


ক্লায়েন্ট সাইড টিউটোরিয়াল
HTML টিউটোরিয়াল
CSS টিউটোরিয়াল
BootStrap টিউটোরিয়াল
JavaScript টিউটোরিয়াল
jQuery টিউটোরিয়াল
AngualarJs টিউটোরিয়াল
সার্ভার সাইড টিউটোরিয়ায়াল
পিএইচপি টিউটোরিয়াল
এসকিউএল টিউটোরিয়াল ওয়ার্ডপ্রেস টিউটোরিয়াল
প্রোগ্রামিং টিউটোরিয়ায়াল
সি টিউটোরিয়াল
পাইথন টিউটোরিয়াল
অন্যান্য
চাকুরীর প্রশ্ন-উত্তর
ফোরাম
ব্লগ
© স্যাট একাডেমী