DOM Event Listener

JavaScript DOM Event Listener: addEventListener & Options

addEventListener() registers an event handler function on a specified DOM target. It supports advanced configuration options such as { once: true }, { passive: true }, and { capture: true }.

Event Listener Options Matrix

flowchart TD
    Listener["target.addEventListener(type, handler, options)"] --> OptOnce["once: true -> Automatically removes listener after 1st trigger"]
    OptOnce --> OptPassive["passive: true -> Promises handler will NOT call preventDefault() (Smooth Scrolling)"]
    OptPassive --> OptCapture["capture: true -> Fires listener during Capturing Phase instead of Bubbling"]

Event Listener Options Reference

Practical Code Example

// Demonstrating addEventListener options and AbortController cleanup

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.createElement("button");
  btn.textContent = "Single Click Action";
  document.body.appendChild(btn);

  // 1. Listener with { once: true }
  btn.addEventListener("click", () => {
    console.log("This listener executes ONCE and then self-destructs!");
  }, { once: true });

  // 2. High-Performance Scroll Listener with { passive: true }
  window.addEventListener("scroll", () => {
    // Passive listener promises never to call event.preventDefault()
    // Allows compositor thread to scroll without blocking!
  }, { passive: true });

  // 3. Cleaning up multiple listeners using AbortController (Modern ES2022)
  const controller = new AbortController();

  btn.addEventListener("mouseover", () => console.log("Mouseover event"), { signal: controller.signal });
  btn.addEventListener("mouseout", () => console.log("Mouseout event"), { signal: controller.signal });

  // Detach ALL listeners associated with controller at once!
  // controller.abort();
});

Best Practices & Gotchas

• Use { passive: true } for Touch/Scroll Events: Touch move and wheel listeners should set { passive: true } to prevent UI thread scrolling stutter.
• Reference Match for removeEventListener(): To remove a listener via removeEventListener(type, fn), fn MUST be a named function reference; anonymous functions cannot be removed.
• Use AbortController for Mass Removal: Pass { signal: controller.signal } to group multiple event listeners so a single controller.abort() call unbinds them cleanly.

Self-Check Challenge

Why can't you remove an anonymous event listener btn.addEventListener("click", () => {}) using removeEventListener?