आप किसी घटना के घटित होने पर जावास्क्रिप्ट को निष्पादित कर सकते हैं जैसे कि उपयोगकर्ता माउस पर क्लिक करता है, एक छवि लोड करता है, जब उपयोगकर्ता HTML तत्व पर क्लिक करता है, HTML फॉर्म जमा करता है, आदि। घटनाएं हैं दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) स्तर 3 का एक भाग और प्रत्येक HTML तत्व में ईवेंट का एक सेट होता है, जो JavaScript कोड को ट्रिगर कर सकता है।
उदाहरण
आइए एक उदाहरण देखते हैं, जो आपको टेक्स्ट बदलने के लिए किसी ईवेंट हैंडलर से फ़ंक्शन को कॉल करने की अनुमति देता है
लाइव डेमो
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html> यहां हम ईवेंट और JavaScript के बीच संबंध को समझने के लिए कुछ उदाहरण देखेंगे।
ऑनक्लिक घटना प्रकार
यह सबसे अधिक उपयोग किया जाने वाला ईवेंट प्रकार है, जो तब होता है जब कोई उपयोगकर्ता अपने माउस के बाएं बटन पर क्लिक करता है। आप इस प्रकार के ईवेंट के विरुद्ध अपना सत्यापन, चेतावनी आदि डाल सकते हैं।
उदाहरण
निम्न उदाहरण आज़माएं।
लाइव डेमो
<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>