JavaScript

JavaScript is all about interactivity, and events are the heart of that. Whenever a user interacts with your webpage — like clicking a button, typing in a field, or moving the mouse — an event occurs.

In this tutorial, we’ll dive deep into JavaScript events, how they work, and how to use them to build dynamic, interactive websites.

---

📌 What Are JavaScript Events?

An event is an action or occurrence that happens in the browser. These actions can be triggered by:

• Users (like clicks, mouse moves, key presses)
• The browser (like page load or error)
• DOM updates or timers

JavaScript allows you to listen for these events and execute code in response — this is what makes modern websites interactive.

---

🧠 Types of Common JavaScript Events

Here are some commonly used events:

Event	Description
click	When a user clicks an element
dblclick	Double click
mouseover	When mouse hovers over an element
mouseout	When mouse leaves an element
keydown	Key is pressed down
keyup	Key is released
input	User types into input field
change	Value of form input changes
submit	A form is submitted
load	Page or resource has loaded

---

🛠️ How to Handle Events in JavaScript

There are three main ways to attach event handlers in JavaScript:

---

✅ 1. Inline HTML Event Attributes (Old Method)

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

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

⚠️ Not recommended for modern development — mixes JavaScript with HTML, harder to maintain.

---

✅ 2. DOM Element Event Property

You can access an HTML element in JavaScript and assign an event handler using a property like onclick.

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

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

This is cleaner, but it only allows one event handler per event type.

---

✅ 3. addEventListener() (Best Practice)

This is the modern, flexible, and most powerful way to handle events.

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

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

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

With addEventListener, you can:

• Attach multiple event handlers
• Remove listeners when needed
• Separate logic from HTML

---

🧪 Real Examples of Events

🔘 Click Event

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

<script>
  document.getElementById("clickMe").addEventListener("click", () => {
    alert("You clicked the button!");
  });
</script>

---

⌨️ Key Events

<input type="text" id="nameInput" placeholder="Type your name">

<script>
  document.getElementById("nameInput").addEventListener("keydown", (event) => {
    console.log("Key pressed: " + event.key);
  });
</script>

---

🖱️ Mouse Events

<div id="box" style="width: 150px; height: 150px; background: lightblue;"></div>

<script>
  const box = document.getElementById("box");

  box.addEventListener("mouseover", () => {
    box.style.background = "skyblue";
  });

  box.addEventListener("mouseout", () => {
    box.style.background = "lightblue";
  });
</script>

---

📥 Form Submit Event

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

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

---

🧱 Event Object

When an event occurs, JavaScript passes an event object to the handler function.

document.addEventListener("click", function (event) {
  console.log("Clicked element:", event.target);
});

You can use this object to get more info: mouse position, key pressed, which element was interacted with, etc.

---

📌 Summary

• JavaScript events let you respond to user actions.
• Use addEventListener() to keep JavaScript separate from HTML.
• Event objects provide detailed info about what happened.
• Events make your website interactive and dynamic.

---

🧠 Final Tip

Always keep logic separate from layout. Use external JS files and addEventListener() instead of mixing JavaScript with HTML.

---