Events: Making Pages React

Clicks, keys, forms, and a page that remembers you. Nine short pages from Grade 12 of High School, about 15 minutes of reading in all.

Start reading Or practice it in the game

What you’ll learn

  • What events are and how event-driven code works
  • addEventListener and callback functions
  • The most common events
  • The event object: target, key and friends
  • Reading forms and inputs
  • preventDefault on form submits
  • Event bubbling and delegation
  • Saving data with localStorage

The pages

Nine pages, about 15 minutes.

  1. What Are Events? Think about a doorbell. You don't stand at your front door all day, staring at it, waiting for someone to arrive. That…
  2. addEventListener To respond to an event, you attach an event listener to an element. An event listener is a function that "listens" for…
  3. The Most Common Events There are hundreds of event types, but you'll use a small handful constantly.
  4. The Event Object When the browser runs your callback, it passes in a special object with information about what just happened. It's…
  5. Forms and Inputs Most real interactivity involves letting the user type something. Let's build a few input-driven features. Text boxes…
  6. Event Bubbling and Delegation Here's a fascinating thing about events. When you click a button, you're not just clicking the button. You're also…
  7. Remembering Things with localStorage Here's a problem. Build a page that lets the user choose dark mode. Now refresh the page. Their choice is gone! Every…
  8. Mini Project: The Dark Mode Switch Let's build a theme switcher that remembers your choice, using everything from this grade. Click the button, and the…
  9. Recap The key ideas of Grade 12, JavaScript events, on one page. An event is something that happens on the page: a click, a…

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning