JavaScript Event Handling: Responding to User and Browser Actions

button.addEventListener("click", showGreeting);

element.addEventListener(eventType, handlerFunction);

<button id="likeBtn">❤️ Like</button><script> const btn = document.getElementById("likeBtn");
btn.addEventListener("click", function() {
  console.log("Liked! ❤️");
});
</script>

// Named function — reusable and removable:function handleClick() {  console.log("Clicked!");}btn.addEventListener("click", handleClick);
// Arrow function — quick and inline:btn.addEventListener("click", () => console.log("Clicked! 🏹"));

const box = document.getElementById("box");
box.addEventListener("click",() => console.log("clicked!"));
box.addEventListener("dblclick",() => console.log("double clicked!"));
box.addEventListener("mouseenter",() => console.log("mouse is IN 🐭"));
box.addEventListener("mouseleave",() => console.log("mouse is OUT"));

document.addEventListener("keydown",(event) => {
  console.log(`You pressed: ${
  event.key
}
`);
  // "a", "Enter", "ArrowUp"…
});

const searchBox = document.getElementById("search");
// "input" fires on EVERY keystroke — live search! 🔍searchBox.addEventListener("input", (event) => {  console.log(`Searching for: ${event.target.value}`);});
// "change" fires when the field loses focus after changingsearchBox.addEventListener("change", () => console.log("Value committed ✅"));

// Wait until HTML is fully parsed before touching elements:document.addEventListener("DOMContentLoaded", () => {  console.log("Page structure ready! 🏗️");});
window.addEventListener("resize",() => {
  console.log(`Window is now ${window.innerWidth}px wide`);
});

btn.addEventListener("click", function(event) {
  console.log(event.type);
  // "click" — what happened  console.log(event.target);       // the exact element clicked  console.log(event.clientX);      // mouse X position  console.log(event.clientY);      // mouse Y position
});

<textarea id="bio" maxlength="100"></textarea><p><span id="counter">0</span>/100 characters</p><script> const bio = document.getElementById("bio");
const counter = document.getElementById("counter");
bio.addEventListener("input",(event) => {
  counter.textContent = event.target.value.length;
});
</script>

<form id="signupForm"> <input id="email" type="text" placeholder="Email"> <button type="submit">Sign Up</button></form><p id="error"></p><script> const form = document.getElementById("signupForm");
form.addEventListener("submit",(event) => {
  event.preventDefault();
  // 🛑 stop the page reload!
  const email = document.getElementById("email").value;
  if (!email.includes("@")) {
    document.getElementById("error").textContent = "⚠️ Invalid email!";
    return;
  } console.log("Submitting via JavaScript… ✅", email);
  // (send with fetch() — Lesson 24 skills! — instead of reloading)  });</script>

<section id="outer">
  <div id="middle">
    <button id="inner">Click me</button>
  </div>
</section>
<script>  document.getElementById("inner").addEventListener("click",    () => console.log("Button clicked 👆"));  document.getElementById("middle").addEventListener("click",    () => console.log("Div heard it too! 📢"));  document.getElementById("outer").addEventListener("click",    () => console.log("Section heard it as well! 📢📢"));</script>

Button clicked 👆Div heard it too! 📢Section heard it as well! 📢📢

document.getElementById("inner").addEventListener("click",(event) => {
  event.stopPropagation();
  // 🧱 the bubble stops HERE  console.log("Only the button hears this");
});

// 😩 The naive way — 100 listeners, and new items don't work!document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", handleItem);
});

<ul id="todoList"> <li>Learn events</li> <li>Build a project</li> <li>Celebrate 🎉</li></ul><script> const list = document.getElementById("todoList");
// ONE listener on the parent:  list.addEventListener("click", (event) => {    if (event.target.tagName === "LI") {     // was it an <li> that got clicked?      event.target.style.textDecoration = "line-through";      console.log(`Completed: ${event.target.textContent} ✅`);    }  });
// 🎁 Bonus magic: items added LATER still work automatically!  const newItem = document.createElement("li");  newItem.textContent = "Dynamically added item";  list.appendChild(newItem);   // clickable immediately — no new listener!</script>

function handleClick() {
  console.log("clicked");
}btn.addEventListener("click", handleClick);
// Later… remove it (must be the SAME function reference!):
btn.removeEventListener("click", handleClick);

<h2>📝 My To-Do List</h2><form id="todoForm"> <input id="todoInput" type="text" placeholder="Add a task…"> <button type="submit">Add</button></form><ul id="todoList"></ul><p id="stats">0 tasks</p><script> const form = document.getElementById("todoForm");
const input = document.getElementById("todoInput");
const list = document.getElementById("todoList");
const stats = document.getElementById("stats");
// ① SUBMIT event + preventDefault — add tasks without reloading:
form.addEventListener("submit",(event) => {
  event.preventDefault();
  // 🛑 no page reload!
  const task = input.value.trim();
  if (task === "") return;
  // ignore empty submissions
  const li = document.createElement("li");
  li.textContent = task;
  list.appendChild(li);
  input.value = "";
  // clear the box
  updateStats();
});
// ② EVENT DELEGATION — one listener handles ALL items, even future ones:
list.addEventListener("click",(event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
    // strike-through on/off
    updateStats();
  }
});
// ③ Double-click to DELETE a task:
list.addEventListener("dblclick",(event) => {
  if (event.target.tagName === "LI") {
    event.target.remove();
    updateStats();
  }
});
function updateStats() {
  const total = list.children.length;
  const done = list.querySelectorAll(".done").length;
  stats.textContent = `${done}/${total} tasks completed 🎯`;
}</script><style> .done {
  text-decoration: line-through;
  opacity: 0.5;
} li {
  cursor: pointer;
}</style>