JavaScript Events

JavaScript में Events वो चीज़ें होती हैं जो ब्राउज़र या यूज़र द्वारा ट्रिगर होती हैं — जैसे बटन पर क्लिक करना, कोई key दबाना, माउस ले जाना, फ़ॉर्म सबमिट करना आदि।
JavaScript के ज़रिए हम इन events पर प्रतिक्रिया (response) दे सकते हैं यानी event handling कर सकते हैं।

इस अध्याय में आप सीखेंगे:

• Events क्या होते हैं
• Event listener कैसे काम करता है
• HTML और JavaScript से event जोड़ना
• Common events की सूची
• अभ्यास प्रश्न

---

JavaScript Event क्या होता है?

Event किसी भी प्रकार की क्रिया है जो user या ब्राउज़र द्वारा होती है।

जैसे:

• user ने mouse से क्लिक किया → click event
• user ने कोई key दबाई → keydown event
• user ने input में कुछ टाइप किया → input event

---

JavaScript में Event Add करने के तरीके

🔹 1. HTML Attribute के ज़रिए (Inline JavaScript)

<button onclick="sayHello()">Click Me</button>

<script>
  function sayHello() {
    alert("Hello!");
  }
</script>

🔹 2. JavaScript से (recommended)

<button id="btn">Click</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    alert("Button Clicked!");
  });
</script>

---

addEventListener() Method

यह modern और बेहतर तरीका है events handle करने का।

Syntax:

element.addEventListener("event", function);

Example:

let box = document.getElementById("box");

box.addEventListener("mouseover", function () {
  box.style.backgroundColor = "lightgreen";
});

---

Common JavaScript Events

Event	Triggered When…
click	यूज़र किसी element पर क्लिक करे
dblclick	डबल क्लिक
mouseover	माउस किसी element पर जाए
mouseout	माउस बाहर आए
keydown	कोई key दबाई जाए
keyup	key छोड़ दी जाए
submit	फ़ॉर्म सबमिट हो
change	input, select आदि का value बदले
input	input field में कुछ लिखा जाए
load	पेज पूरी तरह लोड हो गया हो

---

Example: Input Event

<input type="text" id="nameInput" placeholder="Type something...">
<p id="output"></p>

<script>
  let input = document.getElementById("nameInput");
  let output = document.getElementById("output");

  input.addEventListener("input", function () {
    output.innerText = "You typed: " + input.value;
  });
</script>

---

Example: Form Submit Event

<form id="myForm">
  <input type="text" placeholder="Name" />
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Page reload से बचाता है
    alert("Form submitted!");
  });
</script>

---

ध्यान देने योग्य बातें

• एक element पर कई listeners लगाए जा सकते हैं
• Event bubbling और capturing एक advanced topic है
• event.preventDefault() का उपयोग form submit जैसी चीज़ों को रोकने में होता है
• Arrow functions में this का behavior अलग होता है (method context में न सोचें)

---

अभ्यास प्रश्न

1. JavaScript में event क्या होता है? कोई 3 उदाहरण दीजिए।
2. addEventListener() method क्या करता है? इसका syntax बताइए।
3. नीचे दिए गए code का output क्या होगा? <button onclick="alert('Clicked!')">Click</button>
4. event.preventDefault() का क्या उपयोग है?
5. एक ऐसा HTML और JS code लिखिए जिसमें किसी input में टाइप करने पर नीचे live text दिखे।