Events

addEventListener, bubbling and capturing, delegation for dynamic lists, and forms without page reloads.

Listening

btn.addEventListener('click', event => {
  console.log(event.target);   // what was clicked
  console.log(event.currentTarget); // where the listener lives
});

// remove requires the same function reference
function handler() {}
el.addEventListener('click', handler);
el.removeEventListener('click', handler);

Bubbling and capturing

An event travels three phases: capture down from the root, the target, then bubble back up. Listeners default to the bubble phase.

el.addEventListener('click', fn);              // bubble (default)
el.addEventListener('click', fn, true);        // capture
el.addEventListener('click', fn, { once: true, passive: true });

event.stopPropagation();  // stop further travel
event.preventDefault();   // stop the default action

Event delegation

Instead of attaching a listener to every row, attach one to a stable parent and ask what was clicked. This works for elements added later and uses far less memory.

list.addEventListener('click', e => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;              // click was elsewhere
  handle(btn.dataset.action, btn.dataset.id);
});

Forms without reload

form.addEventListener('submit', async e => {
  e.preventDefault();                       // stop navigation
  const data = new FormData(form);
  const payload = Object.fromEntries(data);
  await fetch(form.action, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
});

FAQ

Related

Working with the DOM Async JavaScript and fetch

Last refreshed 2026-09-17.