JavaScript and events

HTML describes the page and CSS styles it. JavaScript makes it respond: a menu opens, a form validates, a list updates without reloading. In the browser, almost all JavaScript follows one pattern — find an element, listen for something to happen, then change the page.

Finding and changing elements

const counter = document.querySelector('#cart-count');   // find
const button  = document.querySelector('.add-to-cart');

button.addEventListener('click', () => {                  // listen
  const n = Number(counter.textContent) + 1;
  counter.textContent = n;                                 // change
  counter.classList.add('bump');                           // restyle
});

• querySelector takes any CSS selector and returns the first match; querySelectorAll returns all of them.
• textContent reads or replaces an element’s text. It is safe for user-supplied text, because it never interprets it as HTML.
• classList.add, remove and toggle switch CSS classes — the cleanest way to change appearance from JavaScript.

Listening for events

The browser fires events for almost everything: click, input, submit, keydown, scroll, load and many more. addEventListener registers a function to run each time. The function receives an event object:

event.target

The element where the event actually happened — for example, the exact button clicked.

event.currentTarget

The element whose listener is running right now. With delegation, this is the parent.

event.preventDefault()

Cancels the browser’s default action, such as following a link or submitting a form.

event.stopPropagation()

Stops the event travelling any further through the DOM.

Follow a click through the DOM

A click on a button doesn’t only happen on the button. The event travels through the DOM in three phases. Step through them:

Event delegation in practice

const list = document.querySelector('.tasks');

list.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-action="delete"]');
  if (!button) return;                       // click was somewhere else
  button.closest('li').remove();
});

closest walks up from the clicked element to find the nearest matching ancestor, so it works even when the click lands on an icon inside the button. One listener, any number of tasks.

Try both approaches on a real list. Click the icon and the text of a button and compare target with currentTarget, then add a task and try to delete it:

Forms and preventDefault

form.addEventListener('submit', async (event) => {
  event.preventDefault();                    // stay on the page
  const data = Object.fromEntries(new FormData(form));
  await saveProfile(data);
  status.textContent = 'Saved';
});

Without preventDefault, the browser would submit the form the old-fashioned way and reload the page. The async and await keywords here are the subject of the next lecture.

Handling frequent events

Some events fire far more often than you need. Typing a search term fires an input event for every keystroke; scrolling and resizing fire dozens of times a second. Sending a request to the server for each one wastes work and can return results out of order. Two small patterns fix this:

Debounce

Wait until the events stop for a moment, then run once — ideal for search-as-you-type and validating a field.

Throttle

Run at most once per interval while events keep coming — ideal for scroll and resize handlers that must stay responsive.

Type in the box, or simulate a fast typist, and count the calls: