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

শরিফুল ইসলাম
Job category-Php Coder

এইচটিএমএল ইভেন্ট হল এমন কিছু জিনিস যা এইচটিএমএল এর উপাদানের মধ্যে ঘটে থাকে। যখন javascript এইচটিএমএল পেজ এর মধ্যে ব্যবহার হয় ,তখন javascript ওই ইভেন্ট গুলোর উপর প্রতিক্রিয়া করে।

এইচটিএমএল ইভেন্ট

একটি এইচটিএমএল ইভেন্ট তাই করে যা ব্রাউজার করে অথবা কোন ইউজার কিছু করে।

এখানে কিছু এইচটিএমএল ইভেন্ট দেয়া হল

• এইচটিএমএল ওয়েবপেজ লোড হওয়া শেষ হয়েছে
• ইনপুট ফিল্ড পরিবর্তন হয়েছে
• এইচটিএমএল বাটন এ ক্লিক করা হয়েছে।

আপনি যখন কিছু করতে চান তখন কোন ইভেন্ট ঘটতে পারে।

ইভেন্ট চিহ্নিত হওয়ার পর javascript আপনার কোড কার্যে পরিণত করে।

এইচটিএমএল জাভাস্ক্রিপ্ট কোড এর সাথে ইভেন্ট handler attribute ব্যবহারের অনুমতি দেয় এবং এইচটিএমএল এলিমেন্ট এর সাথে যুক্ত করতে হয়।

একক উদ্ধৃতি চিহ্ন দিয়ে:

<some-HTML-element some-event=’some JavaScript’>

ডবল উদ্ধৃতি চিহ্ন দিয়ে:

<some-HTML-element some-event=”some JavaScript”>

এই উদাহরনে কোড এর মাধ্যমে বাটন এলিমেন্ট এর মধ্যে একটি onclick attribute ব্যবহার করা হয়েছে।
যেমন

<button onclick=”getElementById(‘demo’).innerHTML=Date()”>The time is?</button>

উপরের উদাহরণ এ javascript কোড এর একটি উপাদান এবং সেই সাথে id=”demo” এ পরিবর্তন করবে।

পরবর্তী উদাহরনে innerhtml ব্যবহার করে javascript কোড নিজের উপাদানের কোন কনটেন্ট কে পরিবর্তন করবে।
যেমন

<button onclick=”this.innerHTML=Date()”>The time is?</button>

অনেকসময় javascript কোড কয়েক লাইনের হয়ে থাকে। ইভেন্ট অ্যাট্রিবউট ফাংশন কল করার ক্ষেত্রে এটি খুবই সাধারন।
যেমন :

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

অধিক ব্যবহৃত এইচটিএমএল ইভেন্ট