इस अध्याय में, हम सीखेंगे कि कैसे जावा स्क्रिप्ट का उपयोग करके DOM इवेंट्स को हैंडल किया जाता है। इवेंट्स का ज्ञान आपको वेब पेज को इंटरएक्टिव बनाने में मदद करेगा।
इवेंट (Event)
इवेंट (Event) वेब पेज पर होने वाली किसी भी गतिविधि या घटना को कहते हैं। इवेंट्स ब्राउज़र और यूजर इंटरफेस के बीच इंटरएक्शन का एक महत्वपूर्ण हिस्सा हैं। जब कोई यूजर वेब पेज पर कोई क्रिया करता है, जैसे कि बटन क्लिक करना, माउस मूव करना, कीबोर्ड पर कोई बटन दबाना, पेज लोड होना आदि, तो यह एक इवेंट कहलाता है।
इवेंट्स के प्रकार (Types of Events)
- माउस इवेंट्स (Mouse Events):
onclick: जब यूजर किसी एलिमेंट पर क्लिक करता है।ondblclick: जब यूजर किसी एलिमेंट पर डबल क्लिक करता है।onmouseover: जब माउस कर्सर किसी एलिमेंट के ऊपर जाता है।onmouseout: जब माउस कर्सर किसी एलिमेंट से बाहर आता है।onmousedown: जब माउस बटन दबाया जाता है।onmouseup: जब माउस बटन छोड़ा जाता है।onmousemove: जब माउस को मूव किया जाता है।
- कीबोर्ड इवेंट्स (Keyboard Events):
onkeydown: जब कोई की (key) दबाई जाती है।onkeyup: जब दबाई गई की छोड़ी जाती है।onkeypress: जब कोई की दबाई जाती है और छोड़ी जाती है।
- फॉर्म इवेंट्स (Form Events):
onsubmit: जब फॉर्म सबमिट किया जाता है।onreset: जब फॉर्म रीसेट किया जाता है।onfocus: जब फॉर्म का कोई एलिमेंट फोकस में आता है।onblur: जब फॉर्म का कोई एलिमेंट फोकस से बाहर जाता है।onchange: जब फॉर्म का कोई एलिमेंट बदला जाता है।
- विंडो इवेंट्स (Window Events):
onload: जब पेज पूरी तरह से लोड हो जाता है।onunload: जब पेज को छोड़ा जाता है।onresize: जब ब्राउज़र विंडो का आकार बदला जाता है।onscroll: जब पेज को स्क्रॉल किया जाता है।
इवेंट्स का उपयोग (Using Events)
इवेंट्स को हैंडल करने के लिए, हम इवेंट हैंडलर्स का उपयोग करते हैं। इवेंट हैंडलर्स वे फंक्शन्स होते हैं जिन्हें इवेंट के दौरान कॉल किया जाता है। इवेंट हैंडलर्स को सीधे HTML एलिमेंट्स में ऐड किया जा सकता है या जावा स्क्रिप्ट का उपयोग करके प्रोग्रामेटिकली ऐड किया जा सकता है।
इवेंट हैंडलर्स (Event Handlers)
इवेंट हैंडलर्स जावा स्क्रिप्ट के वे फंक्शन्स होते हैं जिन्हें सीधे HTML एलिमेंट्स में इवेंट्स को हैंडल करने के लिए सेट किया जाता है। इवेंट हैंडलर्स को HTML टैग्स के इवेंट एट्रिब्यूट्स में इनलाइन रूप में लिखा जा सकता है या जावा स्क्रिप्ट कोड में एलिमेंट्स की प्रॉपर्टीज़ के रूप में असाइन किया जा सकता है।
उदाहरण (Example):
- इनलाइन इवेंट हैंडलर (Inline Event Handler):
<!DOCTYPE html>
<html>
<head>
<title>Inline Event Handler Example</title>
</head>
<body>
<button onclick="handleClick()">Click Me</button>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
</body>
</html>- जावा स्क्रिप्ट में इवेंट हैंडलर असाइन करना (Assigning Event Handler in JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<button id="btn">Click Me</button>
<script>
let button = document.getElementById("btn");
button.onclick = function() {
alert("Button clicked!");
};
</script>
</body>
</html>इवेंट लिस्नर्स (Event Listeners)
इवेंट लिस्नर्स इवेंट्स को सुनने और हैंडल करने का एक अधिक शक्तिशाली और लचीला तरीका प्रदान करते हैं। इवेंट लिस्नर्स को addEventListener मेथड का उपयोग करके किसी भी HTML एलिमेंट में जोड़ा जा सकता है। यह मेथड आपको एक ही एलिमेंट पर एक ही इवेंट के लिए कई लिस्नर्स जोड़ने की अनुमति देता है, जो कि इवेंट हैंडलर्स में संभव नहीं है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners Example</title>
</head>
<body>
<button id="btn">Click Me</button>
<script>
let button = document.getElementById("btn");
button.addEventListener("click", function() {
alert("Button clicked!");
});
// एक और इवेंट लिस्नर जोड़ें
button.addEventListener("click", function() {
console.log("Button was clicked!");
});
</script>
</body>
</html>इवेंट हैंडलर्स और इवेंट लिस्नर्स में अंतर (Difference between Event Handlers and Event Listeners)
- लचीलापन (Flexibility):
- इवेंट हैंडलर्स एक ही इवेंट के लिए केवल एक फंक्शन को असाइन कर सकते हैं।
- इवेंट लिस्नर्स एक ही इवेंट के लिए कई फंक्शन को जोड़ने की अनुमति देते हैं।
- सिंटैक्स (Syntax):
- इवेंट हैंडलर्स को HTML टैग्स में इनलाइन रूप में लिखा जा सकता है या जावा स्क्रिप्ट में प्रॉपर्टीज़ के रूप में असाइन किया जा सकता है।
- इवेंट लिस्नर्स को
addEventListenerमेथड का उपयोग करके जोड़ा जाता है।
- संगतता (Compatibility):
- इवेंट हैंडलर्स का उपयोग सभी ब्राउज़र्स में किया जा सकता है।
addEventListenerमेथड आधुनिक ब्राउज़र्स में बेहतर तरीके से काम करता है।
इवेंट बबलिंग और कैप्चरिंग (Event Bubbling and Capturing)
इवेंट बबलिंग और कैप्चरिंग दो तरीके हैं जिनसे इवेंट्स DOM में यात्रा करते हैं। इवेंट बबलिंग में, इवेंट सबसे पहले इनर एलिमेंट पर ट्रिगर होती है और फिर आउटर एलिमेंट्स तक जाती है। इवेंट कैप्चरिंग में, इवेंट सबसे पहले आउटर एलिमेंट पर ट्रिगर होती है और फिर इनर एलिमेंट तक जाती है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling and Capturing Example</title>
</head>
<body>
<div id="outer" style="padding: 30px; background: lightblue;">
Outer Div
<div id="inner" style="padding: 20px; background: lightgreen;">
Inner Div
</div>
</div>
<script>
let outerDiv = document.getElementById("outer");
let innerDiv = document.getElementById("inner");
outerDiv.addEventListener("click", function() {
alert("Outer Div clicked!");
}, false); // false indicates event bubbling
innerDiv.addEventListener("click", function() {
alert("Inner Div clicked!");
}, false); // false indicates event bubbling
</script>
</body>
</html>
