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