এইচটিএমএল ইভেন্ট এট্রিবিউট - HTML Event Attribute


গ্লোবাল ইভেন্ট এট্রিবিউট

কোন ওয়েব ব্রাউজারে যখন কোন ব্যাবহারকারী কোন ক্লিক করে তখন কোন জাভাস্ক্রিপ্ট কোড 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 ইভেন্ট

নিচের ইভেন্ট গুলো মাউস ড্রাগ বা 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 ইভেন্ট

নিচের ইভেন্ট গুলো হল ক্লিপবোর্ড বা Clipboard ইভেন্ট।

এট্রিবিউট মান বর্ণনা
oncopy script এটি ব্যাবহারের ফলে, ব্যবহারকারী এলিমেন্টের কন্টেন্টকে কপি বা Copy করলে স্ক্রিপ্ট কাজ করে।
oncut script এটি ব্যাবহারের ফলে, ব্যবহারকারী এলিমেন্টের কন্টেন্টকে কাট বা Cut করলে স্ক্রিপ্ট কাজ করে।
onpaste script এটি ব্যবহারের ফলে, ব্যবহারকারী এইচটিএমএল এলিমেন্টের কন্টেন্টকে পেস্ট বা paste করলে স্ক্রিপ্ট কাজ করে।


মিডিয়া ইভেন্ট

সর্বাধিক বেশি ব্যবহার করা হয় <audio>, <embed>, <img>, <object>, এবং <video> এর মত মিডিয়া এলিমেণ্ট গুলো। তবে অন্য HTML এলিমেণ্টের সাথেও ব্যবহার করা হয়।

এট্রিবিউট মান বর্ণনা
onabort script এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইল বন্ধ করলে স্ক্রিপ্ট কাজ করে।
oncanplay script এটি ব্যাবহারের ফলে, কোন মিডিয়া ফাইল চালু করার জন্য প্রস্তুত হলে স্ক্রিপ্ট কাজ করে।
oncanplaythrough script এটি ব্যাবহারের ফলে, কোন ধরনের বাফারিং অথবা বাধা ছাড়া মিডিয়া ফাইলটি চলা শেষ করলে স্ক্রিপ্ট কাজ করে।
oncuechange script এটি ব্যাবহারের ফলে, মিডিয়ার এলিমেন্টের সূত্র বা formula পরিবর্তন হলে স্ক্রিপ্ট কাজ করে।
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 ওয়েব পেজটি ব্রাউজ করুন।