Events

Events are signals that something happened — a user clicked, typed, scrolled, or the page finished loading. You respond to events using event listeners.

const btn = document.querySelector("#my-btn");

// ── Basic click handler ─────────────────────────────────────────────
btn.addEventListener("click", function(event) {
  console.log("Button clicked!");
  console.log(event.target);      // element that was clicked
  console.log(event.currentTarget); // element the listener is on
});

// Arrow function shorthand
btn.addEventListener("click", (e) => {
  e.preventDefault();    // stop default behavior (form submit, link nav)
  e.stopPropagation();   // stop event bubbling to parent elements
});

// ── Common event types ──────────────────────────────────────────────
element.addEventListener("click",       handler); // click
input.addEventListener("input",         handler); // every keystroke
input.addEventListener("change",        handler); // value changed + focus left
input.addEventListener("focus",         handler); // element focused
input.addEventListener("blur",          handler); // element lost focus
form.addEventListener("submit",         handler); // form submission
document.addEventListener("keydown",    handler); // key pressed
document.addEventListener("keyup",      handler); // key released
window.addEventListener("resize",       handler); // window resized
window.addEventListener("scroll",       handler); // page scrolled
document.addEventListener("DOMContentLoaded", handler); // DOM ready

// ── Event Delegation ────────────────────────────────────────────────
// Listen on the parent — catches events from all children.
// More efficient than adding listeners to every child.
document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("done");
    console.log("Toggled:", e.target.textContent);
  }
});

// ── Removing event listeners ────────────────────────────────────────
// You MUST use a named function reference (not an anonymous arrow)
function handleClick(e) { console.log("clicked"); }
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick); // removes the listener

// ── One-time listener ───────────────────────────────────────────────
btn.addEventListener("click", handler, { once: true }); // auto-removes after first fire