জাভাস্ক্রিপ্ট ইভেন্ট - JavaScript Events


একটি আকর্ষণীয় ওয়েব পেজ তৈরির মুল ভিত্তিই হল জাভাস্ক্রিপ্ট Event, ইভেন্টের সাধারন অর্থ হল ঘটনা। বর্তমানে ডায়নামিক ওয়েব সাইটে বিভিন্ন ঘটনা বা Events ঘটে থাকে যা জাভাস্ক্রিপ্ট ইভেন্ট নামে পরিচিত। এই ঘটনা বা event গুলো হতে পারে কোন বাটনে ক্লিক করা বা কোন লিংকের উপর মাউস ওভার এর ফলে অ্যানিমেশন তৈরি করা ইত্যাদি। নিচে একটি জাভাস্ক্রিপ্ট 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 ইভেন্ট

নিচের ইভেন্ট গুলো মাউস ড্রাগ বা drag এর বিভিন্ন অ্যাকশন এ কাজ করে থাকে।

এট্রিবিউট বর্ণনা
ondrag এটি ব্যাবহারের ফলে, এলিমেন্টকে ড্রাগ বা drag করা হলে স্ক্রিপ্ট কাজ করে।
ondragend এটি ব্যাবহারের ফলে, কোন এলিমেন্টকে ড্রাগ বা drag করা সম্পূর্ণ হলে স্ক্রিপ্ট কাজ করে।
ondragenter এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করে একটি নির্দিষ্ট টার্গেটে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে।
ondragleave এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে সঠিক লক্ষ্যে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করবে।
ondragover এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করে সঠিক লক্ষ্যে ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে।
ondragstart এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করা শুরু করলে স্ক্রিপ্ট কাজ করবে।
ondrop এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টকে ড্রাগ বা drag করার পর ড্রপ বা drop করলে স্ক্রিপ্ট কাজ করে।
onscroll এটি ব্যাবহারের ফলে, কোন এইচটিএমএল এলিমেন্টের স্ক্রলবার স্ক্রল বা scroll করলে স্ক্রিপ্ট কাজ করে।


ক্লিপবোর্ড বা Clipboard ইভেন্ট

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

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


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

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

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