🎧 Event Handlers and Listeners

Handlers vs. Listeners

The two words are used loosely, but the distinction is worth keeping straight:

💡 Restaurant analogy. The customer is the user; the table is a DOM element; pressing the service button is the event; the waiter assigned to watch that table is the listener; and the specific service they perform is the handler. One table can have several waiters watching for different signals — just as one element can have many listeners.

Registering Handlers & the Options Object

The general shape of addEventListener() is:

element.addEventListener(type, handler, options);

You can pass a named function so you can remove it later:

function handleClick(event) {
  console.log('Clicked!', event.target);
}
const button = document.getElementById('submit-button');
button.addEventListener('click', handleClick);

The options object

The third argument can be a boolean (legacy: "use capture?") or, better, an options object:

button.addEventListener('click', handleClick, {
  capture: false, // run during the bubbling phase (the default)
  once: true,     // auto-remove after the first call
  passive: true,  // promise never to call preventDefault() — lets scrolling stay smooth
  signal: controller.signal // remove via an AbortController (see below)
});

The this Context

One of the most common sources of confusion in event code is the value of this. The rule is simple once you see it:

// Regular function: `this` is the element the listener is attached to
button.addEventListener('click', function () {
  console.log(this);          // the button
  this.classList.toggle('active');
});

// Arrow function: `this` is inherited from the surrounding scope — NOT the element
button.addEventListener('click', () => {
  console.log(this);          // whatever `this` was outside (often the module/window)
  button.classList.toggle('active'); // use the variable instead
});

const counter = {
  count: 0,
  increment() {
    this.count++;
    document.getElementById('out').textContent = this.count;
  },
  init() {
    const btn = document.getElementById('inc');
    // Option A: bind
    btn.addEventListener('click', this.increment.bind(this));
    // Option B: arrow wrapper keeps `this` = counter
    btn.addEventListener('click', () => this.increment());
  }
};
counter.init();

Controlling the Event

preventDefault() — cancel the browser's built-in action

// Handle the form yourself instead of a full page reload
document.getElementById('signup-form').addEventListener('submit', (event) => {
  event.preventDefault();
  if (validate()) submitViaFetch();
});

// Replace a link's navigation with in-page behavior
tab.addEventListener('click', (event) => {
  event.preventDefault();
  showTab(tab.getAttribute('href').slice(1));
});

stopPropagation() — keep the event from reaching ancestors

deleteBtn.addEventListener('click', (event) => {
  event.stopPropagation();      // the container's click handler won't fire
  if (confirm('Delete this item?')) removeItem(deleteBtn.dataset.id);
});

stopImmediatePropagation() — also block sibling handlers

Stronger than stopPropagation(): it prevents bubbling and stops any other handlers registered on the same element from running.

button.addEventListener('click', (event) => {
  console.log('First handler');
  event.stopImmediatePropagation();
});
button.addEventListener('click', () => {
  console.log('Second handler'); // never runs
});

Removing Listeners & Avoiding Leaks

To remove a listener you must pass the exact same function reference you added. This is the number-one gotcha:

// ❌ Does nothing — two different anonymous functions
element.addEventListener('click', () => doThing());
element.removeEventListener('click', () => doThing());

// ✅ Works — the same reference both times
function onClick() { doThing(); }
element.addEventListener('click', onClick);
element.removeEventListener('click', onClick);

The modern way: AbortController

Managing many references by hand is tedious. An AbortController lets you tear down any number of listeners with a single call — the same signal you'd use to cancel a fetch.

const controller = new AbortController();
const { signal } = controller;

element.addEventListener('click', onClick, { signal });
element.addEventListener('mousemove', onMove, { signal });
document.addEventListener('keydown', onKey, { signal });

// Later — removes ALL three at once:
controller.abort();

Organizing Handlers: the Controller Pattern

As a feature grows, scattered listeners become hard to follow. Grouping element references, handlers, and teardown into one object keeps everything in one place — a lightweight version of what frameworks do for you.

const TodoController = {
  els: {
    list: document.getElementById('todo-list'),
    form: document.getElementById('todo-form'),
    input: document.getElementById('todo-input'),
  },
  controller: new AbortController(),

  init() {
    const { signal } = this.controller;
    // Arrow handlers keep `this` = TodoController
    this.els.form.addEventListener('submit', (e) => this.onSubmit(e), { signal });
    this.els.list.addEventListener('click', (e) => this.onListClick(e), { signal });
  },

  onSubmit(event) {
    event.preventDefault();
    const text = this.els.input.value.trim();
    if (text) { this.addTodo(text); this.els.input.value = ''; }
  },

  onListClick(event) {
    const item = event.target.closest('.todo-item');
    if (!item) return;
    if (event.target.matches('.delete-btn')) this.deleteTodo(item.dataset.id);
  },

  addTodo(text)   { /* … */ },
  deleteTodo(id)  { /* … */ },

  destroy() { this.controller.abort(); } // one call removes every listener
};

TodoController.init();

Hands-on: Counter Controller

<button id="inc">Clicked 0 times</button>
<button id="stop">Stop counting</button>

const Counter = {
  count: 0,
  controller: new AbortController(),
  els: {
    inc: document.getElementById('inc'),
    stop: document.getElementById('stop'),
  },

  init() {
    const { signal } = this.controller;
    this.els.inc.addEventListener('click', () => this.bump(), { signal });
    this.els.stop.addEventListener('click', () => this.stop(), { signal });
  },

  bump() {
    this.count++;
    this.els.inc.textContent = `Clicked ${this.count} times`;
  },

  stop() {
    this.controller.abort(); // both listeners are removed in one line
    this.els.stop.textContent = 'Stopped';
  },
};

Counter.init();

el.addEventListener('click', () => save());
el.removeEventListener('click', () => save());

Summary & Quiz

📚 Further Reading

• MDN — addEventListener() & options
• MDN — AbortController
• javascript.info — Browser events & handlers
• Chrome DevTools — Inspect event listeners

🚀 What's Next?

You've seen stopPropagation() and hints of bubbling. Next we make propagation the main event: capturing vs. bubbling phases, and the delegation pattern that lets one listener efficiently manage a whole list — even items added after page load.