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