JS इवेंट्स
In this page:
element.addEventListener("eventName", function(event) {
// handler code
});
<element onclick="handler()">onclick
onclick तब चलता है जब किसी element पर click किया जाए, और इसे या तो inline HTML attribute के रूप में सेट किया जा सकता है या सीधे JavaScript में assign किया जा सकता है ताकि कोई विशिष्ट function चले।
उदाहरण: onclick
<button onclick="console.log('Clicked!')">Click Me</button>onmouseover
onmouseover तब चलता है जब mouse pointer किसी element की सीमाओं में प्रवेश करता है, और आमतौर पर onmouseout के साथ जोड़ा जाता है, जो pointer के बाहर जाने पर चलता है, ताकि hover-आधारित प्रभाव बनाए जा सकें।
उदाहरण: onmouseover
<div onmouseover="console.log('Mouse entered')" onmouseout="console.log('Mouse left')">Hover over me</div>onchange
onchange तब चलता है जब किसी form element का value बदला गया हो और फिर वह focus खो दे, जो आमतौर पर dropdowns, checkboxes और text inputs के साथ user के चुनावों पर प्रतिक्रिया देने में इस्तेमाल होता है।
उदाहरण: onchange
<!-- The onchange attribute below runs this JS whenever the selection changes -->
<select onchange="console.log('Selection changed to', this.value)">
<option value="a">A</option>
<option value="b">B</option>
</select>addEventListener
addEventListener किसी element से event handler को मौजूदा handlers को अधिलेखित किए बिना जोड़ता है, और एक ही event के लिए कई listeners जोड़ने देता है, जो इसे events संभालने का आधुनिक, अनुशंसित तरीका बनाता है।
उदाहरण: addEventListener
<button>Click Me</button>
<script>
// Declare the constant `btn`, set to `document.querySelector("button")`
const btn = document.querySelector("button");
// Listen for the `click` event on `btn` and run the handler when it fires
btn.addEventListener("click", () => console.log("First listener"));
// Listen for the `click` event on `btn` and run the handler when it fires
btn.addEventListener("click", () => console.log("Second listener"));
</script>Event Object
हर event handler को अपने पहले argument के रूप में अपने-आप एक event object मिलता है, जिसमें यह ब्योरा होता है कि क्या हुआ, जैसे किस element ने इसे शुरू किया, mouse निर्देशांक, या कौन सी key दबाई गई।
उदाहरण: The Event Object
<button onclick="console.log(event.target)">Click Me</button>- complex applications के लिए सिर्फ onclick जैसे inline event attributes पर निर्भर रहना, addEventListener कहीं बेहतर scale करता है और कई handlers allow करता है।
- यह भूल जाना कि किसी handler को pass किया गया event object उपयोगी details रखता है, जैसे कौन सी key दबाई गई या कौन सा element क्लिक हुआ।
- event bubbling को न समझना, जो किसी child element पर click होने पर parent element के click handler को अनपेक्षित रूप से fire करा सकता है।
- Events JavaScript को clicks, mouse movement, और form changes जैसे user actions पर respond करने देते हैं।
- addEventListener event handlers attach करने का modern, flexible तरीका है, हर element पर कई listeners को support करते हुए।
- Events डिफ़ॉल्ट रूप से parent elements के ज़रिए ऊपर की ओर bubble होते हैं, यह एक behavior है जिसे complex interactions बनाने से पहले समझना ज़रूरी है।
Standard DOM events और addEventListener हर modern browser में supported हैं, जो लगभग सभी interactive web pages की foundation बनाते हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: