जावास्क्रिप्ट हार्ड डॉम इवेंट
- पिछला पृष्ठ डॉम एनिमेशन
- अगला पृष्ठ डॉम इवेंट लिस्टनर
HTML DOM JavaScript को HTML घटनाओं पर प्रतिक्रिया देने की अनुमति देता है:
घटना पर प्रतिक्रिया देना
JavaScript घटना होने पर चल सकता है, जैसे उपयोगकर्ता एक HTML एलिमेंट पर क्लिक करता है。
उपयोगकर्ता एक एलिमेंट पर क्लिक करता है तभी कोड चलाने के लिए HTML घटना अटेंब्यूट में JavaScript को जोड़ें:
onclick=JavaScript
HTML की घटनाओं का उदाहरण:
- जब उपयोगकर्ता माउस पर क्लिक करता है
- जब वेब पृष्ठ लोड होता है
- जब इमेज लोड होती है
- जब माउस एलिमेंट पर आता है
- जब इनपुट फील्ड को बदला जाता है
- जब HTML फॉर्म भेजा जाता है
- जब उपयोगकर्ता किसी कीबोर्ड के बटन को दबाता है
इस उदाहरण में, जब उपयोगकर्ता <h1> तो इसकी सामग्री बदल जाती है:
उदाहरण
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Hello!'">इस टेक्स्ट पर क्लिक करें!</h1> </body> </html>
इस उदाहरण में, इवेंट हैंडलर को फ़ंक्शन को बुला लिया जाता है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">इस टेक्स्ट पर क्लिक करें!</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
HTML इवेंट प्रतियोगिता
यदि आप HTML एलिमेंट को इवेंट आबंटित करना चाहते हैं तो आपको इवेंट प्रतियोगिता इस्तेमाल कर सकते हैं。
उदाहरण
बटन एलिमेंट को आबंटित करने के लिए onclick इवेंट:
<button onclick="displayDate()">सामने पर करें</button>
इस उदाहरण में नाम displayDate वाली फ़ंक्शन बटन पर क्लिक किए जाने पर चलेगी。
HTML DOM के साथ इवेंट आबंटित करना
HTML DOM आपको JavaScript के साथ HTML एलिमेंट को इवेंट आबंटित करने की अनुमति देता है:
उदाहरण
बटन एलिमेंट के लिए निर्दिष्ट करने के लिए onclick इवेंट:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
इस उदाहरण में नाम displayDate वाली फ़ंक्शन id="myBtn" वाले HTML एलिमेंट को आबंटित की गई है。
जब बटन पर क्लिक किया जाता है तो फ़ंक्शन कार्य करता है。
onload और onunload इवेंट
जब उपयोगकर्ता पृष्ठ में आता है और बाहर निकलता है तो इसका ट्रिगरिंग होता है onload और onunload इवेंट
onload इवेंट को यात्री के ब्राउज़र के प्रकार और संस्करण का पता लगाने के लिए इस्तेमाल किया जा सकता है और फिर उस जानकारी के आधार पर वेब पृष्ठ का उचित संस्करण लोड किया जाता है。
onload और onunload इवेंट को कूकी का संभालन के लिए इस्तेमाल किया जा सकता है。
उदाहरण
<body onload="checkCookies()">
onchange इवेंट
onchange इवेंट अक्सर इनपुट फील्ड वेरिफ़िकेशन के साथ संयोजित रूप से इस्तेमाल किया जाता है。
इस तरह इवेंट का इस्तेमाल करने के लिए onchange का उदाहरण। जब उपयोगकर्ता इनपुट फील्ड की सामग्री को बदलता है तो upperCase() फ़ंक्शन बुला लिया जाता है。
उदाहरण
<input type="text" id="fname" onchange="upperCase()">
onmouseover और onmouseout इवेंट
onmouseover और onmouseout इवेंट उपयोगकर्ता जब माउस को एचटीएमएल एलिमेंट पर ले जाए या उससे बाहर ले जाए जाने पर किसी फ़ंक्शन को ट्रिगर करने के लिए है:
onmousedown, onmouseup और onclick इवेंट
onmousedown, onmouseup और onclick इवेंट एक पूर्ण माउस क्लिक इवेंट का निर्माण करता है。
पहले माउस बटन क्लिक करने परonmousedown इवेंट ट्रिगर हुआ है; फिर माउस बटन रिलीज करने परonmouseup इवेंट ट्रिगर हुआ है; अंत में, जब माउस क्लिक पूरा हो जाता हैonclick इवेंट ट्रिगर हुआ है。
और अधिक इंस्टांस
- onmousedown और onmouseup
- जब उपयोगकर्ता माउस बटन दबाता है तो चित्र को बदल दें。
- onload
- जब पृष्ठ पूरी तरह से लोड हो जाता है तो अलर्ट बॉक्स दिखाएं。
- onfocus
- जब इनपुट फील्ड फोकस पाता है तो उसका पृष्ठभूमि रंग बदल दें。
- माउस इवेंट
- जब स्पैनर एलिमेंट पर निर्देश जाता है तो उसका रंग बदल दें。
एचटीएमएल डॉम इवेंट ऑब्जेक्ट संदर्भ दस्तावेज
सभी एचटीएमएल डॉम इवेंटों की सूची के लिए हमारे पूर्ण एचटीएमएल डॉम इवेंट ऑब्जेक्ट संदर्भ दस्तावेज.
- पिछला पृष्ठ डॉम एनिमेशन
- अगला पृष्ठ डॉम इवेंट लिस्टनर
