DHTML में Events और Buttons क्या हैं? (Events and Buttons in DHTML in Hindi)

DHTML में Events और Buttons क्या हैं? (Events and Buttons in DHTML in Hindi)

परिचय

DHTML (Dynamic HTML) वेब पेज को अधिक इंटरएक्टिव और डायनामिक बनाने के लिए HTML, CSS, JavaScript और DOM का संयोजन है। DHTML में Events और Buttons का उपयोग वेब पेज के साथ उपयोगकर्ता की बातचीत (User Interaction) को संभालने के लिए किया जाता है।

1. DHTML में Events क्या हैं?

Events वे ब्राउज़र में घटने वाली गतिविधियाँ (जैसे कि बटन क्लिक, माउस मूवमेंट, कीबोर्ड इनपुट) होती हैं, जिन पर JavaScript कोड के माध्यम से प्रतिक्रिया दी जाती है।

मुख्य Events के प्रकार:

• Mouse Events: onclick, onmouseover, onmouseout, onmousemove, onmousedown, onmouseup
• Keyboard Events: onkeydown, onkeyup, onkeypress
• Form Events: onsubmit, onfocus, onblur, onchange
• Window Events: onload, onunload, onresize, onscroll

Example: onclick Event

यह इवेंट तब चलता है जब उपयोगकर्ता किसी बटन को क्लिक करता है।

मुझे क्लिक करें

Example: onmouseover और onmouseout Events

यह इवेंट तब चलता है जब माउस किसी एलिमेंट के ऊपर जाता है या उससे बाहर आता है।

     मुझ पर होवर करें

2. DHTML में Buttons और उनका उपयोग

वेब पेज पर बटन (Buttons) उपयोगकर्ता से इनपुट प्राप्त करने के लिए उपयोग किए जाते हैं। DHTML में बटन को <button> और <input type="button"> टैग का उपयोग करके जोड़ा जाता है।

Example: Simple Button

क्लिक करें

Example: बटन के माध्यम से टेक्स्ट बदलना

यह पुराना टेक्स्ट है
टेक्स्ट बदलें

Example: बटन से बैकग्राउंड कलर बदलना

पीला
हरा
नीला

3. DHTML में Form Events और Buttons

Forms में इवेंट्स का उपयोग उपयोगकर्ता इनपुट को वैलिडेट (Validate) करने और डेटा को प्रोसेस करने के लिए किया जाता है।

Example: Form Validation

    नाम: 
    

4. Keyboard Events का उपयोग

कीबोर्ड से उपयोगकर्ता की गतिविधि को पकड़ने के लिए onkeydown, onkeyup और onkeypress इवेंट्स का उपयोग किया जाता है।

Example: onkeydown Event

5. Window Events और DHTML

JavaScript का उपयोग वेब ब्राउज़र विंडो पर इवेंट्स को संभालने के लिए किया जाता है।

Example: onload Event

यह इवेंट तब चलता है जब वेब पेज पूरी तरह लोड हो जाता है।

Example: onresize Event

यह इवेंट तब चलता है जब ब्राउज़र विंडो का आकार बदला जाता है।

window.onresize = function() {
    console.log("विंडो का आकार बदला गया!");
};

6. Mouse Events के अन्य उपयोग

Example: Right Click (contextmenu) Event

document.addEventListener("contextmenu", function(event) {
    event.preventDefault();
    alert("राइट-क्लिक अक्षम कर दिया गया!");
});

Example: Double Click Event

डबल क्लिक करें

निष्कर्ष

DHTML में Events और Buttons का उपयोग वेब पेज को अधिक इंटरएक्टिव बनाने के लिए किया जाता है। Mouse Events, Keyboard Events, Form Events, और Window Events वेब डेवलपमेंट में महत्वपूर्ण भूमिका निभाते हैं। इनका सही उपयोग वेबसाइट के अनुभव को बेहतर बनाता है और उपयोगकर्ता को एक स्मूथ और इंटरएक्टिव वेब पेज प्रदान करता है।