📘 JavaScript Event Handling

Presented by Swapnil Meshram within mentorship Devsync

🎓 Started learning JavaScript with the guidance of Devsync, focusing on concepts of events and event handling with simple hands-on practice.

📌 1. What is an event in JavaScript?

An event is an action that happens in the browser, triggered by the user or the browser itself.

🔹 Examples:

• A user clicks a button

• A user types in a form

• A page loads

• A mouse moves, or a key is pressed

---

📌 2. What is event handling?

Event handling means writing JavaScript code that listens for these events and responds when they happen.

👉 Example: Show an alert when a button is clicked.

---

📌 3. Ways to Handle Events in JavaScript

There are three main ways to attach event handlers:

---

✅ Method 1: HTML Event Attributes (Inline)

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

<script>
  function greet() {
    alert("Hello from inline event!");
  }
</script>

🔹 Simple but not recommended for larger projects. Keeps logic mixed with HTML.

---

✅ Method 2: Using DOM Element Properties

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

<script>
  let button = document.getElementById("btn");
  button.onclick = function () {
    alert("Button clicked!");
  };
</script>

🔹 Better than inline, but still only allows one handler per event.

---

✅ Method 3: Using addEventListener()

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

<script>
  let button = document.getElementById("btn");

  button.addEventListener("click", function () {
    alert("Handled using addEventListener!");
  });
</script>

🔹 This is the recommended way:

• Keeps JavaScript and HTML separate

• Allows multiple listeners

• Works with all event types

---

📌 4. Common Event Types

---

📌 5. Event Object

Every event returns an event object that contains useful information such as

element.addEventListener("click", function (event) {
  console.log(event.type);       // "click"
  console.log(event.target);     // element that was clicked
});

✅ The eventobjectis automatically passed to the event handler.

---

📌 6. Handling Input Events

🔹⁣input Event (fires as the user types)

<input id="name" type="text">

<script>
  document.getElementById("name").addEventListener("input", function (e) {
    console.log("Typed: " + e.target.value);
  });
</script>

---

📌 7. Handling Form Submit Event

Prevent the form from refreshing the page using event.preventDefault().

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

<script>
  document.getElementById("myForm").addEventListener("submit", function (e) {
    e.preventDefault(); // stops page reload
    alert("Form submitted!");
  });
</script>

---

📌 8. Removing Event Listeners

You can remove an event listener uusingremoveEventListener()

function sayHello() {
  alert("Hello!");
}

let btn = document.getElementById("btn");
btn.addEventListener("click", sayHello);

// To remove it:
btn.removeEventListener("click", sayHello);

🚫 Note: You must pass the same function reference when removing.

---

📌 9. Event Delegation (Advanced Concept)

Instead of attaching events to multiple child elements, you can attach a single event listener to a parent and use iitevent.targetto identify what was clicked.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  document.getElementById("myList").addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      alert("Clicked on: " + e.target.textContent);
    }
  });
</script>

✅ Useful for dynamic elements created later with JavaScript.

---

📌 10. Summary Table

---

📘 Mini Practice Project: Toggle Text

<button id="toggleBtn">Show/Hide</button>
<p id="text" style="display: none;">Hello JavaScript Events!</p>

<script>
  let button = document.getElementById("toggleBtn");
  let text = document.getElementById("text");

  button.addEventListener("click", function () {
    if (text.style.display === "none") {
      text.style.display = "block";
    } else {
      text.style.display = "none";
    }
  });
</script>

---

✅ Final Tips

• Use addEventListener() for all modern JS event handling.

• Always pass a named function when you need to remove it later.

• Use event.target to identify the exact element interacted with.

• For forms, always use preventDefault() to avoid refresh.