How to Add Event Listeners in JS: Complete Guide

const button = document.getElementById("submit-btn");
 
// When the button is clicked, run this function
button.addEventListener("click", function () {
  console.log("Button was clicked!");
});

element.addEventListener(eventType, handler, options);

const input = document.getElementById("search");
 
// Named function handler
function handleInput(event) {
  console.log("User typed:", event.target.value);
}
 
input.addEventListener("input", handleInput);

const box = document.getElementById("interactive-box");
 
// Click (press and release)
box.addEventListener("click", () => console.log("Clicked"));
 
// Double click
box.addEventListener("dblclick", () => console.log("Double clicked"));
 
// Mouse button pressed down
box.addEventListener("mousedown", () => console.log("Mouse down"));
 
// Mouse button released
box.addEventListener("mouseup", () => console.log("Mouse up"));
 
// Mouse moves over the element
box.addEventListener("mousemove", (e) => {
  console.log(`Mouse at: ${e.clientX}, ${e.clientY}`);
});
 
// Mouse enters the element
box.addEventListener("mouseenter", () => console.log("Mouse entered"));
 
// Mouse leaves the element
box.addEventListener("mouseleave", () => console.log("Mouse left"));

const input = document.getElementById("text-input");
 
// Key pressed down
input.addEventListener("keydown", (e) => {
  console.log("Key down:", e.key);
});
 
// Key released
input.addEventListener("keyup", (e) => {
  console.log("Key up:", e.key);
});

const form = document.getElementById("signup-form");
const emailInput = document.getElementById("email");
 
// Form submitted
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Stop the default form submission
  console.log("Form submitted");
});
 
// Input value changed (fires on every keystroke)
emailInput.addEventListener("input", (e) => {
  console.log("Current value:", e.target.value);
});
 
// Input lost focus
emailInput.addEventListener("blur", () => {
  console.log("Input lost focus");
});
 
// Input gained focus
emailInput.addEventListener("focus", () => {
  console.log("Input focused");
});
 
// Value committed (fires on blur or Enter)
emailInput.addEventListener("change", (e) => {
  console.log("Value committed:", e.target.value);
});

// Page fully loaded (including images, stylesheets)
window.addEventListener("load", () => {
  console.log("Page fully loaded");
});
 
// DOM ready (HTML parsed, before images load)
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is ready");
});
 
// Window resized
window.addEventListener("resize", () => {
  console.log(`Window: ${window.innerWidth}x${window.innerHeight}`);
});
 
// Page scrolled
window.addEventListener("scroll", () => {
  console.log("Scroll position:", window.scrollY);
});

document.addEventListener("click", (event) => {
  console.log("Event type:", event.type);         // "click"
  console.log("Target element:", event.target);    // The clicked element
  console.log("Current target:", event.currentTarget); // Element with the listener
  console.log("Mouse X:", event.clientX);          // X position in viewport
  console.log("Mouse Y:", event.clientY);          // Y position in viewport
  console.log("Timestamp:", event.timeStamp);      // When the event fired
});

element.addEventListener("click", handler, {
  capture: false,  // Use capture phase instead of bubble phase
  once: true,      // Automatically remove after first trigger
  passive: true,   // Promise not to call preventDefault()
  signal: controller.signal  // AbortSignal for removal
});

const button = document.getElementById("one-time-btn");
 
button.addEventListener("click", () => {
  console.log("This only fires once!");
  button.textContent = "Already clicked";
  button.disabled = true;
}, { once: true });
// The listener is automatically removed after the first click

// Passive listeners improve scroll performance
// by telling the browser you won't call preventDefault()
document.addEventListener("scroll", () => {
  // Update UI based on scroll position
  const header = document.querySelector("header");
  header.classList.toggle("scrolled", window.scrollY > 100);
}, { passive: true });
 
// Touch events benefit greatly from passive listeners
document.addEventListener("touchstart", handleTouch, { passive: true });

const controller = new AbortController();
 
document.addEventListener("click", () => {
  console.log("Click detected");
}, { signal: controller.signal });
 
document.addEventListener("keydown", (e) => {
  console.log("Key:", e.key);
}, { signal: controller.signal });
 
// Remove ALL listeners linked to this controller at once
controller.abort();

// CORRECT: Named function reference
function handleClick() {
  console.log("Clicked");
}
 
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick); // Works!
 
// WRONG: Anonymous functions cannot be removed
button.addEventListener("click", function () {
  console.log("Clicked");
});
button.removeEventListener("click", function () {
  console.log("Clicked");
}); // Does NOT work: different function object!

// Pattern 1: Named function
function onResize() { /* ... */ }
window.addEventListener("resize", onResize);
window.removeEventListener("resize", onResize);
 
// Pattern 2: { once: true } for one-time listeners
button.addEventListener("click", () => {
  console.log("Auto-removed after this");
}, { once: true });
 
// Pattern 3: AbortController for multiple listeners
const controller = new AbortController();
button.addEventListener("click", handleClick, { signal: controller.signal });
input.addEventListener("input", handleInput, { signal: controller.signal });
// Remove both at once:
controller.abort();

// OLD WAY (avoid): Inline HTML handler
// <button onclick="handleClick()">Click</button>
 
// OLD WAY (avoid): DOM property
button.onclick = function () {
  console.log("Clicked");
};
// Problem: Only ONE handler per event per element!
 
// MODERN WAY: addEventListener
button.addEventListener("click", handleClick);
button.addEventListener("click", handleAnalytics);
// Multiple handlers on the same event!

// Good: Easy to remove later
function handleScroll() {
  if (window.scrollY > 500) {
    showBackToTop();
    window.removeEventListener("scroll", handleScroll);
  }
}
window.addEventListener("scroll", handleScroll);

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
 
// Resize fires dozens of times per second
window.addEventListener("resize", debounce(() => {
  console.log("Resize settled:", window.innerWidth);
}, 250));

// Always mark scroll/touch listeners as passive if you
// don't need to call preventDefault()
window.addEventListener("scroll", handleScroll, { passive: true });
document.addEventListener("touchmove", handleTouch, { passive: true });

function createImageGallery(containerId, images) {
  const container = document.getElementById(containerId);
  const controller = new AbortController();
  const signal = controller.signal;
 
  // Build gallery HTML
  const gallery = document.createElement("div");
  gallery.className = "gallery";
 
  const viewer = document.createElement("div");
  viewer.className = "gallery-viewer";
  const mainImage = document.createElement("img");
  mainImage.src = images[0].src;
  mainImage.alt = images[0].alt;
  viewer.appendChild(mainImage);
 
  const thumbnails = document.createElement("div");
  thumbnails.className = "gallery-thumbnails";
 
  let currentIndex = 0;
 
  images.forEach((img, index) => {
    const thumb = document.createElement("img");
    thumb.src = img.thumb;
    thumb.alt = img.alt;
    thumb.className = index === 0 ? "thumb active" : "thumb";
 
    thumb.addEventListener("click", () => {
      currentIndex = index;
      updateView();
    }, { signal });
 
    thumbnails.appendChild(thumb);
  });
 
  function updateView() {
    mainImage.src = images[currentIndex].src;
    mainImage.alt = images[currentIndex].alt;
    thumbnails.querySelectorAll(".thumb").forEach((t, i) => {
      t.classList.toggle("active", i === currentIndex);
    });
  }
 
  // Keyboard navigation
  document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowRight" && currentIndex < images.length - 1) {
      currentIndex++;
      updateView();
    } else if (e.key === "ArrowLeft" && currentIndex > 0) {
      currentIndex--;
      updateView();
    }
  }, { signal });
 
  // Swipe support for mobile
  let touchStartX = 0;
 
  viewer.addEventListener("touchstart", (e) => {
    touchStartX = e.touches[0].clientX;
  }, { signal, passive: true });
 
  viewer.addEventListener("touchend", (e) => {
    const touchEndX = e.changedTouches[0].clientX;
    const diff = touchStartX - touchEndX;
 
    if (Math.abs(diff) > 50) {
      if (diff > 0 && currentIndex < images.length - 1) {
        currentIndex++;
      } else if (diff < 0 && currentIndex > 0) {
        currentIndex--;
      }
      updateView();
    }
  }, { signal });
 
  gallery.append(viewer, thumbnails);
  container.appendChild(gallery);
 
  // Return cleanup function
  return {
    destroy() {
      controller.abort(); // Remove ALL listeners at once
      container.removeChild(gallery);
    },
    goTo(index) {
      currentIndex = Math.max(0, Math.min(index, images.length - 1));
      updateView();
    }
  };
}
 
const gallery = createImageGallery("app", [
  { src: "/img/photo1.jpg", thumb: "/img/photo1-sm.jpg", alt: "Sunset" },
  { src: "/img/photo2.jpg", thumb: "/img/photo2-sm.jpg", alt: "Mountain" },
  { src: "/img/photo3.jpg", thumb: "/img/photo3-sm.jpg", alt: "Ocean" }
]);