---

Events are the way web pages react to user actions.
Whenever a user clicks, types, scrolls, submits a form, or hovers over an element — the browser triggers an event.
JavaScript allows us to listen to these events and run custom code in response.

Learning events is important because every interactive feature in modern frontend development is built on this foundation.

---

What Are Events?

An event is any action performed by the user or browser.
Some common examples:

• Clicking a button

• Typing inside an input

• Submitting a form

• Hovering the mouse over an element

• Pressing a keyboard key

• Resizing or scrolling the page

Events allow JavaScript to become interactive instead of being static.

Example:
A button doesn’t do anything by default — but with events, you can make it show a message, change text, add a new element, or update the UI.

---

Event Listeners

An event listener is a function that waits for an event and then runs code when the event happens.

Syntax:

element.addEventListener("eventName", function);

Example:

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  console.log("Button was clicked");
});

The browser listens for a click on the button.
When the click happens, the callback function runs.

---

Why Events Are Important

Events are used in almost every feature:

• Showing validation messages

• Updating the UI in real-time

• Controlling forms

• Opening/closing menus

• Handling cart actions in e-commerce

• Playing/pausing media

• Managing dark mode toggles

Every dynamic website relies heavily on event handling.

---

Working With Form Inputs

Form inputs let users enter data.
JavaScript can read, validate, and update UI based on user input.

Example:

const email = document.getElementById("email").value;

The value updates automatically as the user types.
By listening to events, you can respond instantly.

---

Important Form Events

These events help build real-time validation, previews, button enabling/disabling, and more.

---

Preventing Form Reload

Forms reload pages by default.
To stop this, use:

e.preventDefault();

This is essential for custom form handling.

---

Day 6 Practical Tasks (With HTML + JS)

All examples are ready to copy-paste and test.

---

1. Button Click → Change Text

HTML

<h2 id="heading">Hello User</h2>
<button id="changeBtn">Click Me</button>

JavaScript

const heading = document.getElementById("heading");
const changeBtn = document.getElementById("changeBtn");

changeBtn.addEventListener("click", () => {
  heading.textContent = "Text Updated";
});

---

2. Live Input Preview

HTML

<input id="nameInput" placeholder="Type your name..." />
<p id="preview"></p>

JavaScript

const nameInput = document.getElementById("nameInput");
const preview = document.getElementById("preview");

nameInput.addEventListener("input", () => {
  preview.textContent = nameInput.value;
});

---

3. Form Submission Handling

HTML

<form id="myForm">
  <input id="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.getElementById("myForm");
const email = document.getElementById("email");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Email submitted:", email.value);
});

---

4. Highlight Input on Focus

HTML

<input id="focusInput" placeholder="Click inside me" />

JavaScript

const focusInput = document.getElementById("focusInput");

focusInput.addEventListener("focus", () => {
  focusInput.style.border = "2px solid purple";
});

focusInput.addEventListener("blur", () => {
  focusInput.style.border = "1px solid gray";
});

---

5. Detect Key Presses

HTML

<input id="keyCheck" placeholder="Press any key..." />

JavaScript

const keyCheck = document.getElementById("keyCheck");

keyCheck.addEventListener("keydown", (e) => {
  console.log("Key pressed:", e.key);
});

---

6. Enable Button Only When Input Has Text

HTML

<input id="userInput" placeholder="Type something..." />
<button id="submitBtn" disabled>Submit</button>

JavaScript

const userInput = document.getElementById("userInput");
const submitBtn = document.getElementById("submitBtn");

userInput.addEventListener("input", () => {
  submitBtn.disabled = userInput.value.length === 0;
});

---

Closing Line

Events turn static webpages into interactive applications, and understanding how to handle user input lays the foundation for building modern, dynamic UI experiences in frameworks like Angular.

---