আপনি জাভাস্ক্রিপ্ট চালাতে পারেন কোনো ইভেন্ট ঘটলে যেমন ব্যবহারকারীর মাউসে ক্লিক করা, কোনো ছবি লোড করা, ব্যবহারকারী যখন কোনো HTML উপাদানে ক্লিক করে, HTML ফর্ম জমা দেওয়া ইত্যাদি। ডকুমেন্ট অবজেক্ট মডেল (DOM) লেভেল 3 এর একটি অংশ এবং প্রতিটি HTML উপাদানে ইভেন্টের একটি সেট থাকে, যা জাভাস্ক্রিপ্ট কোড ট্রিগার করতে পারে।
উদাহরণ
আসুন একটি উদাহরণ দেখি, যা আপনাকে পাঠ্য পরিবর্তন করতে ইভেন্ট হ্যান্ডলার থেকে একটি ফাংশন কল করতে দেয়
লাইভ ডেমো
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html> ইভেন্ট এবং জাভাস্ক্রিপ্টের মধ্যে সম্পর্ক বোঝার জন্য এখানে আমরা কয়েকটি উদাহরণ দেখব।
৷ অনক্লিক ইভেন্ট টাইপ
এটি সবচেয়ে বেশি ব্যবহৃত ইভেন্টের ধরন, যেটি ঘটে যখন একজন ব্যবহারকারী তার মাউসের বাম বোতামে ক্লিক করেন। আপনি এই ইভেন্ট টাইপের বিরুদ্ধে আপনার বৈধতা, সতর্কতা ইত্যাদি রাখতে পারেন।
উদাহরণ
নিম্নলিখিত উদাহরণ চেষ্টা করুন৷
৷লাইভ ডেমো
<html>
<head>
<script>
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html> অনমাউসওভার এবং অনমাউসআউট
এই দুটি ইভেন্টের ধরন আপনাকে ছবি বা এমনকি পাঠ্যের সাথেও চমৎকার প্রভাব তৈরি করতে সাহায্য করবে৷ অনমাউসওভার ইভেন্টটি ট্রিগার হয় যখন আপনি আপনার মাউসকে কোনো উপাদানের উপর নিয়ে আসেন এবং অনমাউসআউটটি ট্রিগার হয় যখন আপনি আপনার মাউসটিকে সেই উপাদান থেকে সরিয়ে দেন।
উদাহরণ
নিম্নলিখিত উদাহরণ চেষ্টা করুন৷
৷লাইভ ডেমো
<html>
<head>
<script>
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html> 