What are Events in DHTML in Hindi
RGPV University / DIPLOMA_CSE / Web Technology
Events in DHTML in Hindi
What are Events in DHTML in Hindi
DHTML (Dynamic HTML) एक तकनीक है जिसका उपयोग वेब पेजों को इंटरएक्टिव और डायनामिक बनाने के लिए किया जाता है। DHTML में, "Events" वे क्रियाएं होती हैं जो उपयोगकर्ता या ब्राउज़र द्वारा उत्पन्न होती हैं। इन घटनाओं का उपयोग वेब पेज की प्रतिक्रिया को नियंत्रित करने के लिए किया जाता है, जैसे कि जब कोई उपयोगकर्ता बटन पर क्लिक करता है या माउस को एक क्षेत्र से दूसरे क्षेत्र में ले जाता है।
Events in DHTML
- Click Event: जब उपयोगकर्ता किसी तत्व पर क्लिक करता है, तो यह घटना उत्पन्न होती है।
- Mouseover Event: जब माउस कर्सर किसी तत्व के ऊपर से गुजरता है, तो यह घटना होती है।
- Mouseout Event: जब माउस कर्सर किसी तत्व से बाहर जाता है, तो यह घटना उत्पन्न होती है।
- Keypress Event: जब उपयोगकर्ता कीबोर्ड पर कोई कुंजी दबाता है, तो यह घटना उत्पन्न होती है।
- Submit Event: जब कोई HTML फॉर्म सबमिट होता है, तो यह घटना उत्पन्न होती है।
Common DHTML Events in Hindi
DHTML में कई प्रकार की घटनाएं होती हैं जो अलग-अलग उद्देश्यों के लिए उपयोग की जाती हैं। इन घटनाओं का सही उपयोग करके, हम वेब पेजों को अधिक इंटरएक्टिव और उपयोगकर्ता के अनुभव को बेहतर बना सकते हैं। यहाँ कुछ सामान्य DHTML घटनाओं के बारे में बताया गया है:
Common DHTML Events
- onclick: यह घटना तब होती है जब कोई उपयोगकर्ता किसी तत्व पर क्लिक करता है।
- onmouseover: जब माउस किसी तत्व के ऊपर से गुजरता है, तो यह घटना होती है।
- onmouseout: यह घटना तब होती है जब माउस कर्सर किसी तत्व से बाहर जाता है।
- onfocus: जब कोई उपयोगकर्ता किसी तत्व पर फोकस करता है, तो यह घटना उत्पन्न होती है।
- onblur: यह घटना तब होती है जब कोई उपयोगकर्ता किसी तत्व से फोकस हटा देता है।
- onchange: यह घटना तब होती है जब किसी फॉर्म कंट्रोल का मान बदलता है।
- onsubmit: यह घटना तब होती है जब फॉर्म सबमिट होता है।
Creating Buttons in DHTML in Hindi
DHTML का उपयोग करके हम HTML पेजों पर इंटरेक्टिव बटन बना सकते हैं जो उपयोगकर्ताओं से इनपुट प्राप्त करने या किसी क्रिया को सक्रिय करने में मदद करते हैं। DHTML में बटन बनाने के लिए हम HTML और JavaScript का उपयोग करते हैं, ताकि बटन पर क्लिक करने के बाद किसी प्रकार का इंटरएक्शन हो सके।
Creating Buttons in DHTML
- HTML Button: HTML में बटन बनाने के लिए
<button>टैग का उपयोग किया जाता है। - JavaScript for Button: बटन को इंटरेक्टिव बनाने के लिए JavaScript का उपयोग किया जाता है।
- Event Handling: बटन पर क्लिक करने पर किसी क्रिया को सक्रिय करने के लिए JavaScript events जैसे
onclickका उपयोग किया जाता है।
Example of a Button in DHTML
नीचे एक उदाहरण दिया गया है, जिसमें एक बटन बनाया गया है जो क्लिक करने पर एक संदेश दिखाता है।
<button onclick="alert('Button clicked!')">Click Me</button>
यह बटन जब उपयोगकर्ता पर क्लिक करेगा, तो एक अलर्ट बॉक्स दिखाएगा जिसमें संदेश "Button clicked!" लिखा होगा।
Styling the Button
- CSS for Button Styling: बटन की स्टाइलिंग के लिए हम CSS का उपयोग कर सकते हैं।
- Hover Effects: बटन पर माउस ओवर होने पर विशेष इफेक्ट्स लागू करने के लिए CSS के :hover पseudo-class का उपयोग किया जाता है।
<style>
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
यह CSS बटन को हरा रंग देता है और माउस ओवर होने पर उसका रंग थोड़ा गहरा कर देता है।
FAQs
Events in DHTML refer to actions or occurrences that happen when a user interacts with a webpage, such as clicking a button or moving the mouse over an element. These events are triggered by the browser or user actions, and can be used to modify the webpage dynamically.
Common DHTML events include onclick, onmouseover, onmouseout, onfocus, and onsubmit. These events are widely used to interact with users and to control the behavior of webpage elements dynamically.
To create a button in DHTML, we use the <button> HTML tag along with JavaScript to add interactivity. For example, the onclick event can be used to trigger an action when the button is clicked.
The onclick event is used in DHTML to trigger a JavaScript function when a user clicks on an HTML element, like a button. This event is commonly used for interactive elements such as forms, buttons, and links.
To style a button in DHTML, we can use CSS. For instance, we can change the background color, text color, and add hover effects to make the button more interactive and visually appealing.
The onmouseover event is triggered when the mouse pointer moves over an element, while the onmouseout event occurs when the mouse pointer leaves the element. These events are often used for creating hover effects or changing the appearance of elements dynamically.