JS Events
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>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: