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



আকর্ষণীয় ওয়েব পেজ তৈরির ভিত্তি হল জাভাস্ক্রিপ্ট ইভেন্ট। ইভেন্টের সাধারন অর্থ হল ঘটনা। ডায়নামিক ওয়েব সাইটে বিভিন্ন ঘটনা ঘটে থাকে যা ইভেন্ট নামে পরিচিত। ঘটনা গুলো হতে পারে কোন বাটনে ক্লিক করা বা কোন লিংকের উপর মাউস ওভার এর ফলে অ্যানিমেশন তৈরি করা ইত্যাদি।


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

এইচটিএমএল পেজে জাভাস্ক্রিপ্ট তখনই execute হয় যখন পেজটি লোড হয়। কিন্তু এটা সব সময় ঘটে না । আমরা মাঝে মাঝে চাই যে জাভাস্ক্রিপ্ট তখনই execute হোক যখন একটি ইভেন্ট সংগঠিত হবে। যেমন - যখন কোন ইউজার একটি বাটনে ক্লিক করবে, তখনই কেবল জাভাস্ক্রিপ্ট কোড execute হবে। এক্ষেত্রে আমরা স্ক্রিপ্ট ফাংশনের মাঝে স্থাপন করব। আসলে ইভেন্টকে ফাংশনের সাথে কম্বিনেসন করা হয়। যেমন - যখন কোন ইভেন্ট সংগঠিত হবে তখন ফাংশনকে কল করা হবে।

প্রতিটা অবজেক্টেই কিছু নিজস্ব ইভেন্ট বা ঘটনা আছে। ইভেন্ট সাধারণত ওয়েব সার্ভার, ওয়েব ব্রাউজার ও ওয়েব ইউজারের interaction এর মাধ্যমে ঘটে থাকে। ইভেন্ট Document Object Model (DOM) এর একটি অংশ। ওয়েব পেজের প্রতিটি এলিমেন্টেরই কিছু না কিছু ইভেন্ট রয়েছে যা জাভাস্ক্রিপ্ট কোডকে নিয়ন্ত্রণ করে।
উদাহরণ স্বরূপ - আমরা একটি বাটনে onClick ইভেন্ট ব্যবহার করি যাতে করে ইউজার ঐ বাটনে ক্লিক করলেই কেবল নির্দিষ্ট কোন ফাংশন কাজ করে। এক্ষেত্রে ইভেন্ট HTML ট্যাগের মাঝে ডিফাইন করতে হবে।

নিচে একটি উদাহরণ দেখুন যেখানে আমরা একটি "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>




জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার

ইউজার একটি ওয়েব সাইট ভিজিট করে কোন লিংকে ক্লিক করা বা কোন লিংকের উপর মাউস ওভার করা, ফর্ম সাবমিট করা ইত্যাদি এই ধরণের বিভিন্ন কাজ করে থাকে যা জাভাস্ক্রিপ্ট ইভেন্ট নামে পরিচিত। জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে ইভেন্টকে রেসপন্স করা হয়। আপনি HTML এলিমেন্টে একটি ইভেন্ট হ্যান্ডলার যোগ করে দিতে পারেন যাতে করে কোন ইভেন্ট সংগঠিত হলেই কেবল রেসপন্স পাওয়া যাবে।

উদাহরণ স্বরূপ - আপনি যখন জাভাস্ক্রিপ্ট onMouseover ইভেন্ট হ্যান্ডলার কোন বাটনে যুক্ত করবেন এবং কিছু জাভাস্ক্রিপ্ট কোড নির্দিষ্ট করে দেবেন যা কেবল মাত্র ইভেন্ট সংগঠিত হলেই কোডটি execute বা রান হবে। অর্থাৎ এক্ষেত্রে ঐ বাটনের উপর মাউস ওভার করা।


জাভাস্ক্রিপ্ট ইভেন্ট অবজেক্ট

ইভেন্ট হল কোন কাজ যা জাভাস্ক্রিপ্ট দিয়ে করা হয়ে থাকে আর ইভেন্ট অবজেক্ট সংগঠিত ইভেন্ট সম্পর্কে তথ্য প্রদান করে। আমরা মাঝে মাঝে চাই যে জাভাস্ক্রিপ্ট তখনই execute হোক যখন একটি ইভেন্ট সংগঠিত হবে।

যেমন - যখন কোন ইউজার একটি বাটনে ক্লিক করবে, তখনই কেবল জাভাস্ক্রিপ্ট কোড execute করবে।


জাভাস্ক্রিপ্ট ইভেন্ট এট্রিবিউট

বিভিন্ন এইচটিএমএল এলিমেন্টের মাঝে স্থাপন করা হয় এমন কতগুলো ইভেন্ট এট্রিবিউট এর তালিকা নিচে দেখুন। এদের কাজ হল ব্রাউজারের কাছে ইভেন্টের কাজের ধরন বর্ণনা করা।
এক্ষেত্রে সংক্ষিপ্ত শব্দগুলোর পূর্ণরুপ হল - IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard.

এট্রিবিউট বর্ণনা IE F O W3C
onblur কোন এলিমেন্ট ফোকাস হারায় হ্যাঁ
onchange একটি ফিল্ডের কন্টেন্ট পরিবর্তন হলে হ্যাঁ
onclick মাউস কোন অবজেক্টে ক্লিক করে হ্যাঁ
ondblclick মাউস কোন অবজেক্টে ডাবল-ক্লিক করে হ্যাঁ
onerror ডকুমেন্ট বা ছবি লোডিং এর সময় কোন error হলে হ্যাঁ
onfocus কোন এলিমেন্ট ফোকাস পায় হ্যাঁ
onkeydown কিবোর্ড এর কোন কি চাপা হলে হ্যাঁ
onkeypress কিবোর্ড এর কোন কি চাপা হলে বা বাদ দিলে হ্যাঁ
onkeyup কিবোর্ড এর কোন কি চাপা অবস্থা থেকে মুক্ত হলে হ্যাঁ
onload একটি পেজ বা ছবি লোডিং শেষ হলে হ্যাঁ
onmousedown মাউসের বোতাম চাপা হলে হ্যাঁ
onmousemove মাউস move করা হলে হ্যাঁ
onmouseout এলিমেন্টের ওপর থেকে মাউস সরলে হ্যাঁ
onmouseover এলিমেন্টের ওপর মাউস ওভার করলে হ্যাঁ
onmouseup মাউসের বোতাম চাপা অবস্থা থেকে মুক্ত হলে হ্যাঁ
onresize একটি window বা frem মুক্ত হলে হ্যাঁ
onselect টেক্সট নির্বাচন বা select করলে হ্যাঁ
onunload ইউজার পেজ থেকে বের হলে হ্যাঁ

মাউস/কীবোর্ড এট্রিবিউট

প্রপার্টি বর্ণনা IE F O W3C
altKey যখন কোন ইভেন্ট ট্রিগার করা হয় তখন "ALT" কী চাপা হয়েছিল কিনা তা রিটার্ন করে হ্যাঁ
button যখন কোন ইভেন্ট ট্রিগার করা হয় তখন মাউস পয়েন্টারের কোন বোতাম চাপা হয়েছিল তা রিটার্ন করে হ্যাঁ
clientX যখন কোন ইভেন্ট ট্রিগার করা হয় তখন মাউস পয়েন্টারের horizontal coordinate রিটার্ন করে হ্যাঁ
clientY যখন কোন ইভেন্ট ট্রিগার করা হয় তখন মাউস পয়েন্টারের vertical coordinate রিটার্ন করে হ্যাঁ
ctrlKey যখন কোন ইভেন্ট ট্রিগার করা হয় তখন "CTRL" কী চাপা হয়েছিল কিনা তা রিটার্ন করে হ্যাঁ
metaKey যখন কোন ইভেন্ট ট্রিগার করা হয় তখন "meta" কী চাপা হয়েছিল কিনা তা রিটার্ন করে হ্যাঁ
relatedTarget ইভেন্ট ট্রিগার করে এমন এলিমেন্ট সংশ্লিষ্ট এলিমেন্টকে রিটার্ন করে হ্যাঁ
screenX যখন কোন ইভেন্ট ট্রিগার করা হয় তখন মাউস পয়েন্টারের horizontal coordinate রিটার্ন করে হ্যাঁ
screenY যখন কোন ইভেন্ট ট্রিগার করা হয় তখন মাউস পয়েন্টারের vertical coordinate রিটার্ন করে হ্যাঁ
shiftKey যখন কোন ইভেন্ট ট্রিগার করা হয়েছিল তখন "SHIFT" কী চাপা হয়েছিল হ্যাঁ

আরও কিছু ইভেন্ট এট্রিবিউট

প্রপার্টি বর্ণনা IE F O W3C
bubbles ইভেন্টটি bubbling কি না তা নির্দেশ করে এমন একটি বুলিয়ান মান রিটার্ন করে না হ্যাঁ
cancelable এমন একটি বুলিয়ান মান রিটার্ন করে যা নির্দেশ করে যে ইভেন্টের কোন default কার্যক্রম আছে কি না না হ্যাঁ
currentTarget ইভেন্টকে ট্রিগার করে এমন এলিমেন্ট রিটার্ন করে না হ্যাঁ
target যে এলিমেন্ট ইভেন্ট ট্রিগার করে সেটা রিটার্ন করে না হ্যাঁ
timeStamp মিলিসেকেন্ডে টাইম স্ট্যাম্প রিটার্ন করে না হ্যাঁ
type ইভেন্টের নাম রিটার্ন করে হ্যাঁ







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.