1) What Are Events?

Events are actions that happen in the browser — and JavaScript can “listen” for them and respond.

Common examples:

• Clicking a button
• Typing in an input
• Submitting a form
• Hovering over an element
• Scrolling or resizing the window

When an event occurs, you can run code in response.

2) The addEventListener() Method

Attach an event listener to any element:

element.addEventListener("event", callbackFunction);

Example

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

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

3) Common Event Types

4) Example: Toggle a Navigation Menu

HTML

<button id="menu-btn">☰ Menu</button>
<nav id="nav" class="hidden">
  <a href="#">Home</a>
  <a href="#">Projects</a>
  <a href="#">Contact</a>
</nav>

CSS

.hidden { display: none; }

JavaScript

const menuBtn = document.getElementById("menu-btn");
const nav = document.getElementById("nav");

menuBtn.addEventListener("click", () => {
  nav.classList.toggle("hidden");
});

5) Event Objects

Each event automatically sends an event object with useful info.

Example

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

6) Example: Custom Button Interaction

HTML

<button id="like-btn">❤️ Like</button>
<p id="likes">Likes: 0</p>

JavaScript

const likeBtn = document.getElementById("like-btn");
const likesDisplay = document.getElementById("likes");
let likes = 0;

likeBtn.addEventListener("click", () => {
  likes++;
  likesDisplay.textContent = `Likes: ${likes}`;
});

7) Listening for Input Events

HTML

<input type="text" id="nameInput" placeholder="Enter your name" />
<p id="preview"></p>

JavaScript

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

nameInput.addEventListener("input", () => {
  preview.textContent = `Hello, ${nameInput.value || "friend"}!`;
});

8) Form Submission & Validation

HTML

<form id="contactForm">
  <input type="email" id="email" placeholder="Your email" required />
  <button type="submit">Send</button>
</form>
<p id="status"></p>

JavaScript

const form = document.getElementById("contactForm");
const status = document.getElementById("status");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const email = document.getElementById("email").value;

  if (email.includes("@")) {
    status.textContent = "✅ Message sent successfully!";
  } else {
    status.textContent = "⚠️ Please enter a valid email.";
  }
});

9) Keyboard & Scroll Events

Keyboard Example

document.addEventListener("keydown", (e) => {
  console.log(`You pressed: ${e.key}`);
});

Scroll Example

window.addEventListener("scroll", () => {
  console.log("Scrolling at", window.scrollY);
});

10) Event Delegation (Advanced but Essential)

Instead of adding listeners to every child element, attach one to the parent.

HTML

<ul id="project-list">
  <li>Portfolio</li>
  <li>ShopBlocks</li>
  <li>Nfinite Dashboard</li>
</ul>

JavaScript

const list = document.getElementById("project-list");

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(`Clicked project: ${e.target.textContent}`);
  }
});

11) Quiz Time

🚀 Challenge Task: Add Interactive Components to Your Portfolio

Choose one (or all):

Option A: Dark Mode Toggle

<button id="theme-toggle">🌙 Dark Mode</button>

const toggle = document.getElementById("theme-toggle");

toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  toggle.textContent = document.body.classList.contains("dark")
    ? "☀️ Light Mode"
    : "🌙 Dark Mode";
});

Option B: Accordion Section

<div class="accordion">
  <button class="accordion-header">My Skills</button>
  <div class="accordion-content">HTML, CSS, JS, PHP</div>
</div>

const header = document.querySelector(".accordion-header");

header.addEventListener("click", () => {
  header.nextElementSibling.classList.toggle("active");
});

Option C: Live Character Counter

<textarea id="message" maxlength="150"></textarea>
<p id="counter">150 characters remaining</p>

const textarea = document.getElementById("message");
const counter = document.getElementById("counter");

textarea.addEventListener("input", () => {
  const remaining = 150 - textarea.value.length;
  counter.textContent = `${remaining} characters remaining`;
});

🏁 Module 7 Summary

• How to attach and handle events
• How to interact with user input and forms
• How to use event objects and prevent default actions
• How to dynamically update your UI in response to events
• How to apply event delegation for efficient coding

Next up → MODULE 8: Forms & Validation
We’ll take your interactivity further by validating user input, displaying error messages, and improving UX — all within your live portfolio site.