একটি আকর্ষণীয় ওয়েব পেজ তৈরির মুল ভিত্তিই হল জাভাস্ক্রিপ্ট Event, ইভেন্টের সাধারন অর্থ হল ঘটনা। বর্তমানে ডায়নামিক ওয়েব সাইটে বিভিন্ন ঘটনা বা Events ঘটে থাকে যা জাভাস্ক্রিপ্ট ইভেন্ট নামে পরিচিত। এই ঘটনা বা event গুলো হতে পারে কোন বাটনে ক্লিক করা বা কোন লিংকের উপর মাউস ওভার এর ফলে অ্যানিমেশন তৈরি করা ইত্যাদি। নিচে একটি জাভাস্ক্রিপ্ট event এর ব্যাবহারিক উদাহরণ দেখুন।
এইচটিএমএল ওয়েব পেজে জাভাস্ক্রিপ্ট তখনই execute হয় যখন ওয়েব পেজটি ওয়েব ব্রাউজারে লোড হয়। কিন্তু এমনটা সব সময় হয় না । এবং আমরা কখন কখনও চাই যে জাভাস্ক্রিপ্ট তখনই execute হবে যখন কোন একটি ইভেন্ট সংগঠিত হবে। যেমন - যখন কোন ব্যবহারকারী বা user একটি বাটনে ক্লিক করবে, তখনই কেবল জাভাস্ক্রিপ্ট কোড গুলো execute করবে। এক্ষেত্রে আমরা স্ক্রিপ্ট, ফাংশনের মাঝে স্থাপন করব। এক্ষেত্রে জাভাস্ক্রিপ্ট ইভেন্টকে, ফাংশনের সাথে সমন্বয় বা combination করা হয়। যেমন - যখন কোন ইভেন্ট সংগঠিত হবে তখন ফাংশনকে কল করা হয়।
প্রতিটা অবজেক্টেই কিছু নিজস্ব ইভেন্ট বা ঘটনা আছে। ইভেন্ট সাধারণত ওয়েব সার্ভার, ওয়েব ব্রাউজার ও ওয়েব সাইট এর ব্যবহারকারী এর interaction এর মাধ্যমে ঘটে থাকে। জাভাস্ক্রিপ্ট এর ইভেন্ট হল Document Object Model বা DOM এর একটি অংশ। ওয়েব পেজের প্রতিটি এইচটিএমএল এলিমেন্টেরই কিছু না কিছু ইভেন্ট রয়েছে যা জাভাস্ক্রিপ্ট কোডকে নিয়ন্ত্রণ করে। উদাহরণ স্বরূপ বলা যায় - আমরা একটি বাটনে " onClick " ইভেন্ট ব্যবহার করি যাতে করে ব্যবহারকারী বা user ঐ বাটনে ক্লিক করলেই কেবল নির্দিষ্ট কোন জাভাস্ক্রিপ্ট ফাংশন কাজ করে। এক্ষেত্রে ইভেন্ট HTML ট্যাগের মাঝে define করতে হবে।
নিচে একটি উদাহরণ দেখুন যেখানে আমরা একটি জাভাস্ক্রিপ্ট এর "onclick" ইভেন্ট ব্যবহার করেছি।
<html> <head> <script type="text/javascript"> <!-- function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" value="Click Me!" onclick="popup()"> </body> </html>
ব্যবহারকারী বা user একটি ওয়েব সাইট ব্রাউজ করে কোন লিংকে ক্লিক করার ফলে বা কোন লিংকের উপর মাউস হোভার করলে, ফর্ম সাবমিট করলে ইত্যাদি এই ধরণের বিভিন্ন কাজের ফলে বিভিন্ন event ঘটে থাকে, এগুলো জাভাস্ক্রিপ্ট ইভেন্ট নামে পরিচিত। জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে কোন ইভেন্টকে কার্যক্ষম করা হয়। HTML এলিমেন্টে একটি ইভেন্ট হ্যান্ডলার যোগ করে দেয়া যায়, যাতে করে কোন ইভেন্ট সংগঠিত হলেই কেবল রেসপন্স পাওয়া যাবে।
উদাহরণ স্বরূপ - আমরা যখন জাভাস্ক্রিপ্ট onMouseover ইভেন্ট হ্যান্ডলার কোন বাটনে যুক্ত করি এবং কিছু জাভাস্ক্রিপ্ট কোড নির্দিষ্ট করে দেই যা কেবল মাত্র ইভেন্ট সংগঠিত হলেই কোডটি execute বা রান হবে। অর্থাৎ এক্ষেত্রে ঐ বাটনের উপর মাউস ওভার করা।
ইভেন্ট হল কোন কাজ যা জাভাস্ক্রিপ্ট দিয়ে করা হয়ে থাকে আর ইভেন্ট অবজেক্ট সংগঠিত ইভেন্ট সম্পর্কে তথ্য প্রদান করে। আমরা মাঝে মাঝে চাই যে জাভাস্ক্রিপ্ট তখনই execute হোক যখন একটি ইভেন্ট সংগঠিত হবে।
যেমন - যখন কোন ইউজার একটি বাটনে ক্লিক করবে, তখনই কেবল জাভাস্ক্রিপ্ট কোড execute করবে।
এই ইভেন্ট উইন্ডো অবজেক্টের জন্য ব্যবহার করা হয়। এই এট্রিবিউট গুলো <body> ট্যাগের সাথে ব্যবহার করা হয়।
| এট্রিবিউট | বর্ণনা |
|---|---|
| onafterprint | আর ফলে ডকুমেন্ট প্রিন্ট করার পর স্ক্রিপ্ট কাজ করবে। |
| onbeforeprint | এর ফলে ডকুমেন্ট প্রিন্ট করার আগে স্ক্রিপ্ট কাজ করে। |
| onbeforeunload | এর ফলে ডকুমেন্ট unloaded করার আগে স্ক্রিপ্ট কাজ করে। |
| onerror | এটি ব্যাবহার করার ফলে কোনো ত্রুটি বা error দেখা দিলে স্ক্রিপ্ট কাজ করে। |
| onhashchange | এটা ব্যাবহার করার ফলে URL এর anchor অংশ পরিবর্তন করলে স্ক্রিপ্ট কাজ করে। |
| onload | এটা ব্যাবহার করলে ওয়েব পেজ লোড সম্পূর্ণ হলে স্ক্রিপ্ট কাজ করে। |
| onmessage | এটা বাবহারের ফলে কোন বার্তা বা message আসলে স্ক্রিপ্ট কাজ করে। |
| onoffline | এটা ব্যাবহার করার ফলে ওয়েব ব্রাউজার অফলাইন হলে স্ক্রিপ্ট কাজ করা শুরু করে। |
| ononline | এটা ব্যাবহার করার ফলে ওয়েব ব্রাউজার অনলাইন হলে স্ক্রিপ্ট কাজ করা শুরু করবে। |
| onpagehide | এটা ব্যাবহার করার ফলে যখন ব্যবহারকারী এক পেজ থেকে অন্য পেজে যায় তখন স্ক্রিপ্ট কাজ করে। |
| onpageshow | এটা ব্যাবহার করার ফলে ব্যবহারকারী কোন ওয়েব পেজে আসলে স্ক্রিপ্ট কাজ করবে। |
| onpopstate | এটা ব্যাবহার করার ফলে ওয়েব ব্রাউজারের উইন্ডোর ইতিহাস বা History পরিবর্তন হলে স্ক্রিপ্ট কাজ করবে। |
| onresize | এটা ব্যাবহার করার ফলে ওয়েব ব্রাউজারের উইন্ডোর আকার পরিবর্তন হলে স্ক্রিপ্ট কাজ করবে। |
| onstorage | এটা কোন ওয়েব স্টোরেজ হালনাগাদ বা update হলে তখন স্ক্রিপ্ট কাজ করবে। |
| onunload | ওয়েব পেজ পুনরায় লোড অথবা উইন্ডো বন্ধ হলে স্ক্রিপ্ট কাজ করে। |
নিচে এমন কিছু ইভেন্ট দেখুন, যেগুলো এইচটিএমএল ফর্ম সাবমিট করা হলে কাজ করবে। এই ইভেন্ট গুলো সব এলিমেন্টেই কাজ করে, কিন্তু এইচটিএমএল ফর্ম এলিমেন্টে এদের সবচেয়ে বেশি ব্যবহার করা হয়ে থাকে।
| এট্রিবিউট | বর্ণনা |
|---|---|
| onblur | এর ফলে ব্যবহারকারীর এলিমেন্ট থেকে ফোকাস সরে গেলে স্ক্রিপ্ট কাজ করে। |
| onchange | এর ফলে ব্যবহারকারী এলিমেন্টের মান পরিবর্তন করলে স্ক্রিপ্ট কাজ করবে। |
| oncontextmenu | এর ফলে ব্যবহারকারী contextmenu ক্লিক করলে স্ক্রিপ্ট কাজ করবে। |
| onfocus | এর ফলে ব্যবহারকারী এলিমেন্টে ফোকাস করলে স্ক্রিপ্ট কাজ করবে। |
| oninput | এর ফলে ব্যবহারকারী এলিমেন্টে ইনপুট দেওয়া শুরু করলে স্ক্রিপ্ট কাজ করবে। |
| oninvalid | এর ফলে ইনপুট এলিমেণ্টের মান invalid হলে স্ক্রিপ্ট কাজ করবে। |
| onreset | এটা এইচটিএমএল ফর্মের reset বাটনে ক্লিক করলে স্ক্রিপ্টকে execute করায়। |
| onsearch | এএর ফলে ব্যবহারকারী সার্চ ফিল্ডে কিছু লিখে এন্টার প্রেস করলে স্ক্রিপ্টটি কাজ করে (<input="search"> এর জন্য) |
| onselect | এর ফলে ব্যবহারকারী কোন এলিমেন্টে কিছু লেখা নির্দেশ বা select করলেই স্ক্রিপ্ট কাজ করবে। |
| onsubmit | এটি ব্যাবহার করলে এইচটিএমএল ফর্ম সাবমিট হলে স্ক্রিপ্ট কাজ করবে। |
নিচের ইভেন্ট গুলো কিবোর্ড এর বিভিন্ন অ্যাকশন এ কাজ করে থাকে।
| এট্রিবিউট | বর্ণনা |
|---|---|
| onkeydown | এটি ব্যাবহার করলে ব্যবহারকারী কীবোর্ডের একটি কী বা key চেপে রাখলে স্ক্রিপ্ট কাজ করে। |
| onkeypress | এটি ব্যাবহার করলে ব্যবহারকারী কীবোর্ডের একটি কী বা key চাপলে স্ক্রিপ্ট কাজ করে। |
| onkeyup | এটি ব্যাবহার করলে ব্যবহারকারী কীবোর্ডের একটি কী বা key চাপ দিয়ে ছেড়ে দিলে স্ক্রিপ্ট কাজ করে। |
নিচের ইভেন্ট গুলো মাউস এর বিভিন্ন অ্যাকশন এ কাজ করে।
| এট্রিবিউট | বর্ণনা |
|---|---|
| onclick | এটি ব্যাবহারের ফলে, এলিমেন্টে ক্লিক করলে স্ক্রিপ্ট কাজ করে। |
| ondblclick | এটি ব্যাবহারের ফলে, এলিমেন্টে একত্রে দুইবার ক্লিক করলে স্ক্রিপ্ট কাজ করে। |
| onmousedown | এটি ব্যাবহারের ফলে, মাউস বাটনে ক্লিক অবস্থায় স্ক্রিপ্ট কাজ করে। |
| onmousemove | এটি ব্যাবহারের ফলে, কোন এলিমেন্টের উপর মাউস পয়েন্টারটি চলন্ত অবস্থায় থাকলে স্ক্রিপ্ট কাজ করে। |
| onmouseout | এটি ব্যাবহারের ফলে, কোন এলিমেন্টের উপর থেকে মাউস পয়েন্টারটি সরিয়ে নিলে স্ক্রিপ্ট কাজ করে। |
| onmouseover | এটি ব্যাবহারের ফলে, এলিমেন্টের উপর মাউস পয়েন্টারটি নিলে স্ক্রিপ্ট কাজ করে। |
| onmouseup | এটি ব্যাবহারের ফলে, এলিমেন্টের উপর মাউসের বাটন ক্লিক করলে স্ক্রিপ্ট কাজ করে। |
| onmousewheel | Deprecated. onwheel এর মত কাজ। এর পরিবর্তে onwheel ব্যবহার করা হয়। |
| onwheel | এটি ব্যাবহারের ফলে, এলিমেন্টের উপর মাউসের স্ক্রল বাটনটি উপর-নিচে ঘুরালে স্ক্রিপ্ট কাজ করে। |
নিচের ইভেন্ট গুলো মাউস ড্রাগ বা drag এর বিভিন্ন অ্যাকশন এ কাজ করে থাকে।
| এট্রিবিউট | বর্ণনা |
|---|---|
| ondrag | এটি ব্যাবহারের ফলে, এলিমেন্টকে ড্রাগ বা drag করা হলে স্ক্রিপ্ট কাজ করে। |
| ondragend | এটি ব্যাবহারের ফলে, কোন এলিমেন্টকে ড্রাগ বা drag করা সম্পূর্ণ হলে স্ক্রিপ্ট কাজ করে। |
| ondragenter | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করে একটি নির্দিষ্ট টার্গেটে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে। |
| ondragleave | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে সঠিক লক্ষ্যে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করবে। |
| ondragover | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করে সঠিক লক্ষ্যে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে। |
| ondragstart | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করা শুরু করলে স্ক্রিপ্ট কাজ করবে। |
| ondrop | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করার পর ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে। |
| onscroll | এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টের স্ক্রলবার স্ক্রল বা scroll করলে স্ক্রিপ্ট কাজ করে। |
নিচের ইভেন্ট গুলো হল ক্লিপবোর্ড বা Clipboard ইভেন্ট।
| এট্রিবিউট | বর্ণনা |
|---|---|
| oncopy | এটি ব্যাবহারের ফলে, ব্যবহারকারী এলিমেন্টের কন্টেন্টকে কপি বা Copy করলে স্ক্রিপ্ট কাজ করে। |
| oncut | এটি ব্যাবহারের ফলে, ব্যবহারকারী এলিমেন্টের কন্টেন্টকে কাট বা Cut করলে স্ক্রিপ্ট কাজ করে। |
| onpaste | এটি ব্যবহারের ফলে, ব্যবহারকারী এইচটিএমএল এলিমেন্টের কন্টেন্টকে পেস্ট বা paste করলে স্ক্রিপ্ট কাজ করে। |
সর্বাধিক বেশি ব্যবহার করা হয় <audio>, <embed>, <img>, <object>, এবং <video> এর মত মিডিয়া এলিমেণ্ট গুলো। তবে অন্য HTML এলিমেণ্টের সাথেও ব্যবহার করা হয়।
| এট্রিবিউট | বর্ণনা |
|---|---|
| onabort | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইল বন্ধ করলে স্ক্রিপ্ট কাজ করে। |
| oncanplay | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইল চালু করার জন্য প্রস্তুত হলে স্ক্রিপ্ট কাজ করে। |
| oncanplaythrough | এটি ব্যাবহারের ফলে, কোন ধরনের বাফারিং অথবা বাধা ছাড়া মিডিয়া ফাইলটি চলা শেষ করলে স্ক্রিপ্ট কাজ করে। |
| oncuechange | এটি ব্যাবহারের ফলে, মিডিয়ার |
| ondurationchange | এটি ব্যাবহারের ফলে, মিডিয়া ফাইলের স্থায়ীত্ব পরিবর্তন হলে স্ক্রিপ্ট কাজ করে। |
| onemptied | এটি ব্যাবহারের ফলে, অপ্রত্যাশিতভাবে সংযোগ বিচ্ছিন্ন হবার জন্য বা অন্য কোন কারনে হঠাৎ করে মিডিয়া ফাইলটি পাওয়া না গেলে এই স্ক্রিপ্ট কাজ করে। |
| onended | যখন মিডিয়া ফাইল চলতে চলতে এর শেষ পর্যায়ে চলে আসে তখন স্ক্রিপ্টটি কাজ করে। সাধারনত মিডিয়া ফাইলের শেষে কোনো বার্তা বা massage দেওয়ার জন্য এই ইভেন্ট ব্যাবহার করা হয়। |
| onerror | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইল লোড হওয়ার সময় কোনো ত্রুটি হলে স্ক্রিপ্ট কাজ করে। |
| onloadeddata | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইলের তথ্য সম্পূর্ণ লোড হলে স্ক্রিপ্ট কাজ করে। |
| onloadedmetadata | এটি ব্যাবহারের ফলে, মাত্রা এবং সময়কালের মত মেটা বা meta ডাটা সম্পূর্ণ লোড হলে স্ক্রিপ্ট কাজ করে। |
| onloadstart | এটি ব্যাবহারের ফলে, কোন কিছু লোড হওয়ার আগে মিডিয়া ফাইল লোড হওয়া শুরু হলে স্ক্রিপ্ট কাজ করে। |
| onpause | মিডীয়াটি ব্যবহারকারী অথবা স্বয়ংক্রিয়ভাবে থামলে(pause) স্ক্রিপ্টটি কাজ করে। |
| onplay | এটি ব্যাবহারের ফলে, কোন মিডিয়া প্লে করার জন্য প্রস্তুত হলে স্ক্রিপ্ট কাজ করে। |
| onplaying | এটি ব্যাবহারের ফলে, মিডিয়া প্লে হলে স্ক্রিপ্ট কাজ করে। |
| onprogress | এটি ব্যাবহারের ফলে, ব্রাউজার মিডিয়ার তথ্য পাওয়ার প্রক্রিয়াধীন অবস্থায় স্ক্রিপ্ট কাজ করে। |
| onratechange | এটি ব্যাবহারের ফলে, প্রতিবার মিডিয়ার চলার গতি বা playback rate পরিবর্তন হলে স্ক্রিপ্ট কাজ করে। যেমন ইউজার মিডিয়া ফাইলকে যখন slow motion অথবা fast-forward মোড এ পরিবর্তন করে। |
| onseeked | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইলট চলার অবস্থান পরিবর্তন সম্পন্ন হলে স্ক্রিপ্ট কাজ করবে। |
| onseeking | এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইলটি চলার অবস্থান পরিবর্তন শুরু করলে স্ক্রিপ্ট কাজ করবে। |
| onstalled | এটি ব্যবহারের ফলে, কোন কারণে ব্রাউজার মিডিয়া ফাইলের তথ্য না পেলে স্ক্রিপ্ট কাজ করবে। |
| onsuspend | এটি ব্যবহারের ফলে, কোন মিডিয়া সম্পূর্ণ লোড হওয়ার আগে লোডিং কোন কারনে ব্যার্থ হলে স্ক্রিপ্ট কাজ করবে। |
| ontimeupdate | এটি ব্যাবহারের ফলে, ব্যবহারকারী মিডিয়ার চলার অবস্থান পরিবর্তন করলে স্ক্রিপ্ট কাজ করে। |
| onvolumechange | এটি ব্যাবহারের ফলে, ব্যবহারকারী মিডিয়ার শব্দের উচ্চতা বা volume পরিবর্তন করলে স্ক্রিপ্টটি কাজ করে। ভলিয়ম বা volume এ "mute" এর নির্ধারণ সহ। |
| onwaiting | এটি ব্যাবহারের ফলে, কোন মিডিয়া লোডিং-এর জন্য থামলে বা pauses হয় কিন্তু লোড হলে আবার চালু হতে পারে, এমন ক্ষেত্রে স্ক্রিপ্ট কাজ করে। |
| এট্রিবিউট | বর্ণনা |
|---|---|
| ontoggle | এটি ব্যাবহারের ফলে, ব্যবহারকারী <details> এলিমেন্টকে চালু অথবা বন্ধ করলে স্ক্রিপ্ট কাজ করে। |
এইচটিএমএল এর সকল ইভেন্ট আত্ত্রিবুতে সম্পর্কে জানতে W3C এর UI Events ওয়েব পেজটি ব্রাউজ করুন।
শেয়ার করুন
