Command Palette

Search for a command to run...

Hectal
Phase 9Intermediate10 of 16 in JavaScript

Events

Make pages react: event listeners, bubbling and capturing, delegation, default actions, mouse, keyboard and form events, debounce, throttle and custom events.

In Phase 8 you learned to find and change elements. This phase makes the page react. An event is a message from the browser saying "something happened": a click, a key press, a form being sent, the page finishing loading. You'll attach listeners (functions that run when an event happens), read the event object that describes what happened, and remove listeners when you no longer need them.

Then you'll learn how an event travels through the DOM tree (capturing down, bubbling up), how one listener on a parent can handle thousands of children (delegation), how to stop the browser's built-in behaviour (preventDefault), and the details of mouse, pointer, keyboard, focus and form events, including FormData and custom validation messages.

The last topics are what real apps need: debounce and throttle to keep search boxes and scroll handlers fast, and custom events so parts of your app can talk without knowing about each other. Every example is live. Because the preview can't click for you, most examples end with a line like button.click() that fires the event from code, so the console shows something straight away; then you can click, type and press keys yourself.

0/8 · 0%
8 topics ~3 h 27 code blocks & diagrams
Start with the first topic
1
9.1

Event Listeners

An event listener is a function you register with addEventListener so the browser calls it whenever a certain event happens on an element; it receives an event object describing what happened, and removeEventListener or the once option takes it away again.

27 min 4 code practice

2
9.2

Bubbling and Capturing

An event doesn't only happen on the element you clicked: it travels down the DOM tree from window to the target (capturing), then back up to window (bubbling), and listeners on every ancestor along the way get a turn unless one calls stopPropagation().

21 min 3 code practice

3
9.3

Event Delegation

Event delegation means putting one listener on a parent instead of one on every child: because events bubble, the parent hears every child's event, uses event.target.closest() to find which child it was, and automatically handles children added later.

20 min 3 code practice

4
9.4

Default Actions

Many events come with a built-in browser behaviour, called the default action: a link navigates, a form sends and reloads the page, a checkbox toggles. event.preventDefault() cancels it so your JavaScript can do something else, and passive listeners promise never to cancel, which keeps scrolling smooth.

21 min 3 code practice

5
9.5

Mouse, Keyboard and Focus Events

Pointer events (pointerdown, pointerup, click, dblclick) cover mouse, touch and pen; keyboard events (keydown, keyup) give you key (the character meant) and code (the physical key); and focus events (focus, blur, focusin, focusout) tell you which element will receive typing.

24 min 4 code practice

6
9.6

Form Events and Validation in JavaScript

input fires on every change to a field's value, change fires when a change is committed, and submit fires on the form; FormData collects every named field in one step, and the Constraint Validation API (checkValidity, setCustomValidity, validity) lets JavaScript add its own rules and messages to the browser's built-in ones.

23 min 4 code practice

7
9.7

Debounce and Throttle

Some events fire dozens of times a second (typing, scrolling, resizing). Debounce waits until the events stop for a moment and then runs once; throttle runs at most once per time window while they keep coming. Both are small functions built from closures and timers.

23 min 3 code practice

8
9.8

Custom Events

You can invent your own events: new CustomEvent("cart:add", { detail, bubbles: true }) creates one, element.dispatchEvent(event) fires it, and any code listening for that name reacts, so parts of an app can talk to each other without knowing about each other.

20 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A click counter with reset

Make the +1 button add one to the number in #count each time it is clicked, and the Reset button set it back to 0.

Beginner
2

Volume with the arrow keys

The volume in #volume starts at 5. Listen for keydown on document:

Beginner
3

A to-do list with one listener

The Add form already adds new items. Now, with one click listener on #list (event delegation):

Intermediate
4

Product cards that announce cart:add

Each product card's Add button should dispatch a custom event named cart:add that bubbles, with detail set to { name, price } (price as a number), read from the card's data-name and data-price.

Intermediate
5

A debounced filter

Typing in #q should filter the fruit list: items that don't contain the typed text (ignoring capitals) are hidden with the hidden property; an empty box shows every item.

Intermediate
6

A sign-up form with your own validation

The form has novalidate, so the browser won't block it: your submit listener does the checking. On submit, always call preventDefault(), then check each field and write a message into its error paragraph (or empty it when the field is fine):

Intermediate