Lesson 5: Events and Forms

Lesson 4 showed you how to change the page — this lesson is about responding to what the user actually does. Clicks, typing, form submissions: events are how your code finally reacts to a real person instead of running once and stopping.

addEventListener: the core pattern

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button was clicked!");
});

This is the pattern you'll use constantly: select an element, then tell it "when this event happens, run this function." Nothing runs until the event actually occurs.

Common events

Event	Fires when
`click`	An element is clicked
`input`	A text field's value changes, as the user types
`submit`	A form is submitted
`keydown`	Any key is pressed
`mouseover`	The mouse moves over an element

The event object

input.addEventListener("input", function(event) {
  console.log(event.target.value); // the current text in the field
});

The function passed to addEventListener automatically receives an event object with details about what happened. event.target is the exact element the event fired on — extremely useful when the same function handles multiple elements.

Working with forms

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // stops the page from reloading
  const email = document.querySelector("#email").value;
  console.log("Submitted email:", email);
});

quick tip

event.preventDefault() is almost always the first line in a form's submit handler. Without it, the browser does its old-fashioned default behavior — reloading the whole page — which erases any JavaScript state you had.

See it live

This is a real, working form handled entirely by JavaScript — try it:

Simple form validation

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const email = document.querySelector("#email").value;

  if (!email.includes("@")) {
    console.log("Please enter a valid email.");
    return; // stops the function here, nothing after this runs
  }

  console.log("Form is valid, submitting:", email);
});

This combines Lesson 2's if statement with what you've learned about forms — a real validation check before you'd actually send data anywhere.

Try it yourself

exercise

Build a simple form with a text input and a submit button. Add a submit event listener that calls preventDefault(), grabs the input's value, and logs it. Confirm the page doesn't reload when you submit.

Level up: live character counter

exercise 2

Add a text input and a <p> below it. Using the input event, update the paragraph to show how many characters have been typed, live, as the user types — no submit button needed.

✓ quick check — 3 questions

1. What does event.preventDefault() do on a form submit?

Deletes the form Stops the page from reloading Submits the form twice

2. Which event fires as a user types into a text field?

click submit input

3. What does event.target refer to?

The exact element the event happened on The entire page The browser window

what's next

Lesson 6 is the final project for this course — you'll combine variables, functions, arrays, the DOM, and events to build a real, working interactive to-do list app from scratch.

bottom line

addEventListener is how your code reacts to what a user does. event.target tells you exactly what triggered it, and preventDefault() stops a form's default page-reload behavior so your JavaScript can handle it instead.