JavaScript Event Listeners Cheat Sheet: addEventListener, Delegation & Options

DOM events travel capture-down then bubble-up. addEventListener registers a handler; pass { once: true } or an AbortSignal to remove it. Delegation listens on a parent for clicks on many children. preventDefault cancels the browser action; stopPropagation hides the event from ancestors.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Add: el.addEventListener("click", fn) — do not use onclick in JS files.
• Remove: Same function reference, or signal from AbortController.
• Options: { capture, once, passive, signal }. passive: true on touch/wheel for scroll performance.
• Delegation: Listen on ul, then event.target.closest("button").
• Default: preventDefault() on submit/click when you handle it in JS.
• Keyboard: keydown for shortcuts. Check event.key, not deprecated keyCode.
• Input: input fires on every change; change on commit (and for some controls).
• Form: Listen to submit on the form, not only the button click.

Copy-paste examples

Delegated clicks with abort

One listener on the list survives re-renders of children. AbortController removes it cleanly.

const list = document.querySelector('#todos');
const ctrl = new AbortController();
list.addEventListener('click', (event) => {
  const btn = event.target.closest('[data-id]');
  if (!btn || !list.contains(btn)) return;
  console.log('id', btn.dataset.id);
}, { signal: ctrl.signal });
// later: ctrl.abort();

Form submit without a full page reload

Always preventDefault on submit if you will fetch. Read FormData from the form element.

document.querySelector('#contact').addEventListener('submit', async (event) => {
  event.preventDefault();
  const body = new FormData(event.currentTarget);
  const res = await fetch('/contact.php', { method: 'POST', body });
  if (!res.ok) throw new Error('Send failed');
});

Common mistakes

• Attaching a new listener on every render without removing the old one.
• stopPropagation everywhere so analytics and tooltips never see the click.
• Using passive: true on touchstart then calling preventDefault (it will be ignored).
• Binding submit on the button instead of the form — Enter in an input will not run your handler.

FAQ

1. onclick vs addEventListener? onclick is one slot and mixes markup with behavior. addEventListener stacks handlers and takes options.

1. What is event.target vs currentTarget? target is the deepest node. currentTarget is the element with the listener (the parent in delegation).

1. Do React onClick props use this API? React delegates at the root with its own system. In vanilla JS, you call addEventListener yourself.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.