ওয়েব পেজে ইউজার কখনও মাউস ক্লিক করে(কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে (মাউস হোভার) পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট।
Event এর বাংলা শাব্দিক অর্থ ঘটনা। programming এ ও এটি একই অর্থে ব্যবহৃত হয়। যেমন কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট (মাউস হোভার ইভেন্ট)। এরুপ আরো ইভেন্ট আছে যেমন scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।
jQuery এর মাধ্যমে খুব সহজেই আনেক ধরনের event handle করা যায়। এতে event সমূহ বিভিন্ন প্রকারের হতে পারে যেমন -
Form event - Form এর object (Button, Text Field, Textarea, Check Box, Radio Button etc)
সমূহের event কে Form event বলে। যেমন: Blur, Change, Focus ইত্যাদি।
Keyboard Events - Focusin, Focusout, Keydown, Keypress ইত্যাদি।
Mouse Events - Click, Dblclick, Focusin, Focusout, Hover, Mousedown ইত্যাদি।
Browser Events - Error, Resize, Scroll ইত্যাদি।
Document Loading Events - Load, Ready, Unload ইত্যাদি। এ ছাড়া আরও অনেক event রয়েছে যেমন : Bind, Live, Delegate, one ইত্যাদি।
যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট
হ্যান্ডলার এর ভিতর কোড এক্সিকিউট হয়।
যেমন কোন একটা এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করেন তাহলে
ঐ এলিমেন্টটি পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোডগুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে
এর ভিতরের কোড কাজ করবেনা বরং অপেক্ষা করবে। সাধারনত জেকোয়েরির কোডের শুরুতেই এই হ্যান্ডলার ব্যবহার করে অর্থ্যাৎ পুরো পেজ সম্পূর্ন
লোড হবে এরপর জেকোয়েরির অন্যসব কোডগুলি কাজ করা শুরু করবে। এটাও এর আগের টিউটোরিয়ালে দেখানো হয়েছে।
উদাহরণ দেখুন
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
অনুরুপ অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমন $("button").click(function(){ এভাবে থাকলে এর অর্থ হচ্ছে button এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড এক্সিকিউট হবে।
নিচে যেক্যুয়েরীর সকল ইভেন্ট হ্যান্ডলার মেথডগুলো দেয়া হল।
| মেথড | বর্ণনা |
|---|---|
| bind() | এলিমেন্টের সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। 3.0 ভার্সনে বাদ এর তালিকায় রাখা হয়েছে, এর পরিবর্তে on() মেথড ব্যবহার করাই ভাল। |
| blur() | নির্ধারিত এলিমেন্টে blur ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| change() | নির্ধারিত এলিমেন্টে change ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| click() | click ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| dblclick() | dblclick ইভেন্ট সংযুক্ত/ট্রিগার কর। |
| delegate() | নির্বাচিত এলিমেন্টের নির্দিষ্ট চাইল্ড এলিমেন্টের সাথে সাদৃশ্যপূর্ণ এলিমেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। 3.0 ভার্সনে বাদ এর তালিকায় রাখা হয়েছে, এর পরিবর্তে on() মেথড ব্যবহার করাই উত্তম। |
| die() | live() মেথডের মাধ্যমে যুক্ত করা সকল ইভেন্ট হ্যান্ডলার রিমুভ বা remove) করে। 1.9 ভার্সনে এটি বাদ দেওয়া হয়েছে। |
| error() | error ইভেন্ট সংযুক্ত/ট্রিগার করে। 3.0 ভার্সনে এটি বাদ দেওয়া হয়েছে। |
| event.currentTarget | ইভেন্ট উত্থাপন পর্বের মধ্যে বর্তমান DOM এলিমেন্ট। |
| event.data | যখন বর্তমানে এক্সিকিউটিং হ্যান্ডলার সংযুক্ত হয়, তখন ইভেন্ট মেথডে অতিরিক্ত ডাটা ধারন করে যা ইভেন্ট মেথড এর মধ্য দিয়ে অতিক্রম করানো হয়। |
| event.isDefaultPrevented() | কোন ইভেন্ট অবজেক্টের জন্য event.preventDefault() কল করা হয়েছিল কিনা তা রিটার্ন করে। |
| event.isImmediatePropagationStopped() | কোন ইভেন্ট অবজেক্টের জন্য event.stopImmediatePropagation() কল করা হয়েছিল কিনা তা রিটার্ন করে। |
| event.isPropagationStopped() | ইভেন্ট অবজেক্টের জন্য event.stopPropagation() কল করা হয়েছিল কিনা তা রিটার্ন করে। |
| event.pageX | ডকুমেন্টের বাম প্রান্তকে ভিত্তি ধরে মাউসের অবস্থান রিটার্ন করে। |
| event.pageY | ডকুমেন্টের উপরের প্রান্তকে ভিত্তি ধরে মাউসের অবস্থান রিটার্ন করে। |
| event.preventDefault() | ইভেন্টের ডিফল্ট এ্যাকশন প্রতিরোধ করে। |
| event.relatedTarget | মাউস মোভমেন্টে কোন এলিমেন্ট যদি থাকে তবে টা অন্তর্ভুক্ত হয়েছে অথবা বাদ হয়েছে তা রিটার্ন করে। |
| event.result | নির্দিষ্ট ইভেন্টের মাধ্যমে ট্রিগার হওয়া ইভেন্ট হ্যান্ডলার দ্বারা রিটার্নকৃত শেষ/পূর্ববর্তী ভ্যালু ধারণ করে। |
| event.stopImmediatePropagation() | অন্যান্য ইভেন্ট হ্যান্ডলার কল করা প্রতিরোধ করে। |
| event.stopPropagation() | DOM ট্রি উত্থাপন থেকে ইভেন্টকে প্রতিরোধ করে। এছাড়া ইভেন্ট থেকে যেকোন প্যারেন্ট হ্যান্ডলারকে নোটিফিকেশন পেতেও বাধা করে। |
| event.target | যে DOM এলিমেন্ট ইভেন্ট ট্রিগার করে তা রিটার্ন করে। |
| event.timeStamp | ইভেন্ট ট্রিগার করা হলে ১ জানুয়ারি, ১৯৭০ সাল থেকে এখন পর্যন্ত সময়কে মিলিসেকেন্ডে রিটার্ন করে। |
| event.type | ইভেন্ট এর কোন টাইপ ট্রিগার করা হয়েছিল তা রিটার্ন করে। |
| event.which | ইভেন্টের জন্য কীবোর্ড যে কী অথবা মাউস এর যে বাটন চাপা হয়েছে তা রিটার্ন করে। |
| focus() | কোন নির্দিষ্ট এলিমেন্টে focus ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| focusin() | focusin ইভেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। |
| focusout() | focusout ইভেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। |
| hover() | hover ইভেন্টে দুইটি ইভেন্ট হ্যান্ডলার সংযুক্ত করে। |
| keydown() | keydown ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| keypress() | keypress ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| keyup() | keyup ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| live() | বর্তমান নির্বাচিত এলিমেন্টে এখন অথবা পরে এক বা একাধিক ইভেন্ট হ্যান্ডলার যুক্ত করে। 1.9 ভার্সনে এটা বাদ দেওয়া হয়েছে। |
| load() | load ইভেন্ট এর সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। 1.8 ভার্সনে এটাকে বাদ দেওয়া হয়েছে। |
| mousedown() | mousedown ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mouseenter() | mouseenter ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mouseleave() | mouseleave ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mousemove() | mousemove ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mouseout() | mouseout ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mouseover() | mousemover ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| mouseup() | mousemup ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| one() | নির্বাচিত এলিমেন্টে এক বা একাধিক ইভেন্ট হ্যান্ডলার যুক্ত করে। এই হ্যান্ডলার প্রতিটি এলিমেন্টের জন্য শুধুমাত্র একবার ট্রিগার করা যায়। |
| ready() | DOM সম্পূর্ণ লোড হলে এক্সিকিউট হওয়ার জন্য একটি ফাংশন নির্ধারণ করে। |
| resize() | resize ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| scroll() | scroll ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| select() | select ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| submit() | submit ইভেন্ট সংযুক্ত/ট্রিগার করে। |
| toggle() | দুটি click ইভেন্টে এর মধ্যে টোগল করার জন্য এক বা একাধিক ফাংশন যুক্ত করে। 1.9 ভার্সনে এটাকে বাদ দেওয়া হয়েছে। |
| trigger() | নির্বাচিত এলিমেন্টের সাথে যুক্ত সকল ইভেন্ট ট্রিগার করে। |
| triggerHandler() | নির্বাচিত এলিমেন্টের নির্ধারিত ইভেন্টের সাথে যুক্ত সকল ফাংশন ট্রিগার করে। |
| unbind() | নির্বাচিত এলিমেন্ট থেকে পূর্বে যুক্ত হওয়া ইভেন্ট হ্যান্ডলার রিমুভ করে। 3.0 ভার্সনে বাদ এর তালিকায় রাখা হয়েছে, এর পরিবর্তে off() মেথড ব্যবহার করা ভাল। |
| undelegate() | নির্বাচিত এলিমেন্ট থেকে ইভেন্ট হ্যান্ডলার রিমুভ করে। 3.0 ভার্সনে বাদ এর তালিকায় রাখা হয়েছে, এর পরিবর্তে off() মেথড ব্যবহার করুন। |
| unload() | unload ইভেন্টে ইভেন্ট হ্যান্ডলার সংযুক্ত করে। 3.0 ভার্সনে বাদ দেওয়া হয়েছে। |
এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।
Copyright 2016-2018 by websschool.com, All Rights Reserved.