---
title: "Events — ZudoJS Academy"
description: "Make pages respond to clicks, typing and forms: listeners, bubbling and capturing, preventDefault, event delegation, custom events and debounced search, in a real shopping cart."
source: https://zudojs.oyinlola.site/learn/browser-events
---
LEVEL 4 · LESSON 10 OF 13
JavaScript in the browser Core
# Events
Make pages respond to clicks, typing and forms: listeners, bubbling and capturing, preventDefault, event delegation, custom events and debounced search, in a real shopping cart.
- **55 min** to read and try
- **You need:** The DOM, this in depth and Closures
- **You build:** A shopping cart driven by three delegated listeners, with custom events, quantity validation and double-submit protection, plus a debounced search box
BY THE END OF THIS LESSON YOU CAN
- Attach and remove listeners, and read the event object (target, currentTarget, type)
- Predict the order listeners run in through the capture, target and bubble phases
- Stop default actions with preventDefault, and explain why stopPropagation is rarely the answer
- Handle a whole list with one delegated listener, including items added later
- Handle forms and typing with submit, input and change events, FormData and a debounce
- Design custom events so separate parts of a page stay in step
## The Remove button that did nothing
A grocery shop's cart page lists what the customer is buying, each line with a Remove button. The developer wrote the obvious code: find every Remove button and give each one a **listener**, a function the browser calls when the button is clicked. It worked in testing. Then customers started complaining that items they had just added could not be removed. Here is a small copy of the page:
index.html
```ts
Cart
Rice 5kg
Palm oil 1L
```
The example clicks the buttons in code with `button.click()`, which fires the same `click` event a mouse click would, so you can see the result without touching anything:
bug.js
```ts
for (const button of document.querySelectorAll(".remove")) {
button.addEventListener("click", () => {
const line = button.closest("li");
console.log("removing", line.dataset.sku);
line.remove();
});
}
// Later, the customer adds garri to the cart.
const line = document.createElement("li");
line.dataset.sku = "garri-2kg";
const remove = document.createElement("button");
remove.type = "button";
remove.className = "remove";
remove.textContent = "Remove";
line.append("Garri 2kg ", remove);
document.querySelector("#cart").append(line);
document.querySelector('[data-sku="rice-5kg"] .remove').click();
document.querySelector('[data-sku="garri-2kg"] .remove').click();
const left = [...document.querySelectorAll("#cart li")].map((li) => li.dataset.sku);
console.log("still in the cart:", left);
```
What the browser terminal prints
```ts
```
Rice was removed. Garri was not: its button was created *after* the loop ran, so it never got a listener. The loop attached listeners to the buttons that existed at that moment, and nothing else. Re-running the loop after every change would fix that, and introduce the opposite bug: the old buttons would get a second listener each time, and one click would remove, or charge, twice.
The real fix uses the way events travel through the DOM tree: a single listener on the `
` can handle clicks on every button inside it, including buttons that do not exist yet. To get there, you need to know exactly what happens between "the user clicks" and "your function runs".
## Listeners and the event object
An **event** is a message that something happened: a click, a key press, a form being submitted, a page finishing loading. Every DOM node is an `EventTarget` (you saw it at the end of the prototype chain in [The DOM](https://zudojs.oyinlola.site/learn/browser-dom#tree)), which gives it three methods: `addEventListener(type, listener, options)`, `removeEventListener(type, listener, options)` and `dispatchEvent(event)`.
When the event happens, the browser calls each listener with an **event object** that describes it:
index.html
```ts
Events
Rice 5kg
Help
```
event-object.js
```ts
const button = document.querySelector("#remove-rice");
button.addEventListener("click", (event) => {
console.log("type:", event.type);
console.log("constructor:", event.constructor.name);
console.log("target:", event.target.id, "currentTarget:", event.currentTarget.id);
console.log("bubbles:", event.bubbles, "cancelable:", event.cancelable);
console.log("isTrusted:", event.isTrusted);
});
button.click();
```
What the browser terminal prints
```ts
```
- `type` is the event's name. `click` events are `MouseEvent`s, which also carry the pointer position and which modifier keys were held.
- `target` is the element the event happened on. `currentTarget` is the element whose listener is running now. Here they are the same button; with delegation they are not.
- `bubbles` and `cancelable` say whether the event travels up the tree and whether its default action can be stopped. Both are explained below.
- `isTrusted` is `false` because code created this click, not a person. Browsers let only trusted events do a few sensitive things, such as opening a pop-up or going full screen.
A second way to listen is an event-handler property: `button.onclick = fn`. It holds exactly one function, so a second assignment silently replaces the first. `addEventListener` can add any number of listeners, which run in the order they were added, and it takes options. Use `addEventListener`.
onclick.js
```ts
const button = document.querySelector("#remove-rice");
button.onclick = () => console.log("analytics: remove clicked");
button.onclick = () => console.log("cart: removing rice");
button.addEventListener("click", () => console.log("listener 1"));
button.addEventListener("click", () => console.log("listener 2"));
button.click();
```
What the browser terminal prints
```ts
```
The analytics handler is gone. In a real page, two scripts written by two teams would never know they were overwriting each other.
> NOTE
>
> Listeners declared with `function` get `this` set to `currentTarget`; arrow functions keep the `this` from outside. [this in depth](https://zudojs.oyinlola.site/learn/js-this#events) covers it. Reading `event.currentTarget` says what you mean in both kinds of function.
## How an event travels: capture, target, bubble
When you click the `×` icon inside the Remove button, which element was clicked? The icon, the button, the list item, the list and the page all contain the pointer. The DOM's answer is to deliver the event to *all* of them, in a fixed order called **propagation**. The browser first works out the **path**: the target and every ancestor up to `window`. Then the event travels that path in three phases:
```ts
window
│ ▲
1 capture phase │ │ 3 bubble phase
(listeners with ▼ │ (normal listeners,
capture: true) document from the target
│ ▲ back up)
▼ │