Events and Forms

An event is something that happens in the browser: a click, a key press, a form submission, a page finishing loading. You react to events with addEventListener, which takes an event name and a function to run when it fires:

const button = document.querySelector("#save");
button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

The function you pass is called an event handler. It automatically receives an event object as its argument, which carries details about what happened — including, for forms, a way to stop the browser's default behavior.

Forms fire a submit event when the user presses Enter in a field or clicks a submit button. By default, submitting a form reloads the page — almost never what you want in an interactive app. Call event.preventDefault() at the start of your handler to stop that:

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const nameInput = document.querySelector("#name");
  console.log("You typed:", nameInput.value);
});

Every text input, textarea, and select element exposes its current content through its .value property — that's how you read what a user has typed at the moment your handler runs. For a checkbox, you'd read .checked instead of .value.

A common beginner pattern is validating input before acting on it — e.g. checking that a text field isn't empty before adding it to a list — which combines everything from this lesson: an event listener, reading .value, and a conditional.