আপনি একটি ইভেন্ট ঘটলে জাভাস্ক্রিপ্ট এক্সিকিউট করতে পারেন, যেমন ব্যবহারকারী মাউস ক্লিক করলে, ইমেজ লোড হলে, ব্যবহারকারী HTML এলিমেন্টে ক্লিক করলে, HTML ফর্ম সাবমিট করলে ইত্যাদি। ইভেন্টها ডকুমেন্ট অবজেক্ট মডেল (DOM) লেভেল ৩-এর একটি অংশ এবং প্রতিটি HTML এলিমেন্টে ইভেন্টের একটি সেট থাকে, যা জাভাস্ক্রিপ্ট কোড ট্রিগার করতে পারে।
উদাহরণ
একটি উদাহরণ দেখি, যা একটি ইভেন্ট হ্যান্ডলার থেকে ফাংশন কল করে টেক্সট পরিবর্তন করতে দেয়
Live Demo
<!DOCTYPE html> <html> <body> <p onclick="myEvent(this)">Click me</p> <script> function myEvent(id) { id.innerHTML = "Welcome!"; } </script> </body> </html>এখানে আমরা কিছু উদাহরণ দেখব ইভেন্ট এবং জাভাস্ক্রিপ্টের সম্পর্ক বুঝতে।
onclick ইভেন্ট টাইপ
এটি সবচেয়ে বেশি ব্যবহৃত ইভেন্ট টাইপ, যা ঘটে যখন ব্যবহারকারী তার মাউসের বাম বাটনে ক্লিক করে। আপনি আপনার ভ্যালিডেশন, সতর্কতা ইত্যাদি এই ইভেন্ট টাইপের বিপরীতে রাখতে পারেন।
উদাহরণ
নিচের উদাহরণটি ট্রাই করুন।
Live Demo
<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>onmouseover এবং onmouseout
এই দুটি ইভেন্ট টাইপ আপনাকে ইমেজ বা টেক্সটের সাথে সুন্দর ইফেক্ট তৈরি করতে সাহায্য করবে। onmouseover ইভেন্ট ট্রিগার হয় যখন আপনি আপনার মাউস কোনো এলিমেন্টের উপরে আনেন এবং onmouseout ট্রিগার হয় যখন আপনি সেটি থেকে মাউস সরিয়ে নেন।
উদাহরণ
নিচের উদাহরণটি ট্রাই করুন।
Live Demo
<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>