Events: reacting to the user

What is an event?

An event is a signal that something happened on the page: a click, a key press, text typed in a box, a form being sent. You tell the browser which function to run when an event happens. That function is called an event listener (or handler).

const button = document.querySelector('#add-to-cart');
const count = document.querySelector('#cart-count');
let items = 0;

button.addEventListener('click', () => {
  items += 1;
  count.textContent = items;
});

The event object

The browser passes one argument to your function: the event object. It describes what happened. event.type is the name of the event, event.target is the element where it started, and event.key tells you which key was pressed.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    document.querySelector('#cart-drawer').hidden = true;
  }
});

const search = document.querySelector('#search');
search.addEventListener('input', (event) => {
  console.log('You typed:', event.target.value);
});

Stopping the default action

Some events have a default action. Clicking a link opens a new page. Submitting a form reloads the page. event.preventDefault() stops that default, so your own JavaScript can handle it instead.

Bubbling and event delegation

When you click a button inside a list item inside a list, the click event fires first on the button, then on the li, then on the ul, and up to the document. This rising is called bubbling, like a bubble rising in water.

Event delegation uses bubbling. Instead of adding a listener to each of 100 items, add one listener to the parent. Inside it, use event.target.closest() to find which item was clicked. It even works for items you add later.

const cartList = document.querySelector('#cart');

cartList.addEventListener('click', (event) => {
  const button = event.target.closest('button.remove');
  if (!button) return; // the click was not on a remove button
  const item = button.closest('li');
  console.log('Removing', item.dataset.id);
  item.remove();
});

Removing a listener

function onScroll() {
  console.log('Scrolled to', window.scrollY);
}
window.addEventListener('scroll', onScroll, { passive: true });
// later, when you do not need it:
window.removeEventListener('scroll', onScroll);

// run only once, then the browser removes it for you:
button.addEventListener('click', () => console.log('First click!'), { once: true });