// B6.4 · ~32 min · Beginner
After this lesson you know the path a click takes through the page, tell target from currentTarget, and let one listener on a list handle every item, even items added later.
You will be able to
Warm-up · Activity 1 of 7
const button = document.querySelector('#like');
let n = 0;
function count() {
n += 1;
}
button.addEventListener('click', count);
button.click();
button.removeEventListener('click', count);
button.click();
console.log(n);Predict · Activity 2 of 7
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
console.log(event.target.tagName, event.currentTarget.tagName);
});
document.querySelector('#first').click();Practice · Activity 3 of 7
const item = event.target.____('li');Practice · Activity 4 of 7
Practice · Activity 5 of 7
const box = document.querySelector('#box');
const go = document.querySelector('#go');
const order = [];
box.addEventListener('click', () => order.push('box bubble'));
box.addEventListener('click', () => order.push('box capture'), { capture: true });
go.addEventListener('click', () => order.push('button'));
go.click();
console.log(order.join(', '));Brain teaser · Activity 6 of 7
const list = document.querySelector('#list');
let n = 0;
for (const li of list.querySelectorAll('li')) {
li.addEventListener('click', () => {
n += 1;
});
}
const coffee = document.createElement('li');
coffee.textContent = 'Coffee';
list.append(coffee);
coffee.click();
list.querySelector('li').click();
console.log(n);Apply · Activity 7 of 7
Check your work against this list
Read the worked example, then write the exercises. Your code runs in your browser or on your computer and is never uploaded.
Worked example
The page has an empty list. main.js keeps the tasks in an array and builds the items with render(), as in lesson B6.2. One click listener on the list handles every Done button: it finds the button with closest, checks it belongs to the list, flips that task and renders again. Two listeners on body show the order of the phases. A third task is added after the listener, and the script then clicks its Done button and the list itself, the way the exercise tests do.
main.js
const list = document.querySelector('#list');
const tasks = [
{ text: 'Water the plants', done: false },
{ text: 'Buy bread', done: false }
];
function render() {
const items = tasks.map((task, index) => {
const li = document.createElement('li');
li.dataset.index = String(index);
if (task.done) li.classList.add('done');
const text = document.createElement('span');
text.textContent = task.text;
const button = document.createElement('button');
button.textContent = 'Done';
li.append(text, ' ', button);
return li;
});
list.replaceChildren(...items);
}
// One listener on the list handles every button, now and later.
list.addEventListener('click', (event) => {
const button = event.target.closest('button');
if (!button || !list.contains(button)) return; // not a button of this list
const index = Number(button.closest('li').dataset.index);
tasks[index].done = !tasks[index].done;
console.log('toggled', index, '| target:', event.target.tagName, '| currentTarget:', event.currentTarget.id);
render();
});
// Two listeners on body show the order: capture first, bubble last.
document.body.addEventListener('click', () => console.log('body, capture phase'), { capture: true });
document.body.addEventListener('click', () => console.log('body, bubble phase'));
render();
tasks.push({ text: 'Call Mum', done: false }); // added after the listener
render();
// The script clicks its own page, the way the exercise tests do.
list.querySelector('[data-index="2"] button').click();
list.click(); // the list itself, not a button: ignored
console.log('items:', list.children.length);
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bubbling</title>
</head>
<body>
<main>
<h1>Today</h1>
<ul id="list"></ul>
</main>
<script type="module" src="main.js"></script>
</body>
</html>
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Output
body, capture phase
toggled 2 | target: BUTTON | currentTarget: list
body, bubble phase
body, capture phase
body, bubble phase
items: 3
<!-- #list -->
<ul id="list"><li data-index="0"><span>Water the plants</span> <button>Done</button></li><li data-index="1"><span>Buy bread</span> <button>Done</button></li><li data-index="2" class="done"><span>Call Mum</span> <button>Done</button></li></ul>Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Exercise 1 of 2
Replace the starter's three listeners with one click listener on #palette. A click on a colour button, or on the dot inside it, shows "Chosen: " plus the button's data-color in #chosen, and gives that button, and only that one, the class active. A click on the palette between the buttons changes nothing. A button added to the palette later must work too. The starter reads event.target.dataset.color, which is undefined when the click lands on the dot, and new buttons get no listener.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Run the tests: the dot gives "Chosen: undefined", nothing gets the class active, and the Gold button does nothing.
One listener: palette.addEventListener('click', (event) => { … }). Inside, const button = event.target.closest('button'), and return when !button || !palette.contains(button).
Remove active from every button in a loop first, then add it to the one clicked, and read button.dataset.color, not event.target.dataset.color.
One way to solve it. Yours can look different and still pass the checks.
const palette = document.querySelector('#palette');
const chosen = document.querySelector('#chosen');
palette.addEventListener('click', (event) => {
const button = event.target.closest('button');
if (!button || !palette.contains(button)) return;
for (const other of palette.querySelectorAll('button')) {
other.classList.remove('active');
}
button.classList.add('active');
chosen.textContent = 'Chosen: ' + button.dataset.color;
});
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
const palette = document.querySelector('#palette');
const chosen = document.querySelector('#chosen');
// TODO: replace these listeners with one listener on the palette.
for (const button of palette.querySelectorAll('button')) {
button.addEventListener('click', (event) => {
chosen.textContent = 'Chosen: ' + event.target.dataset.color;
});
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const button = (page, color) => page.document.querySelector('#palette [data-color="' + color + '"]');
const chosen = (page) => page.document.querySelector('#chosen').textContent;
const active = (page) => [...page.document.querySelectorAll('#palette .active')].map((b) => b.dataset.color);
test('Clicking a button shows its colour', async () => {
const page = await loadPage();
button(page, 'red').click();
assert.equal(chosen(page), 'Chosen: red', 'after clicking Red the page shows ' + JSON.stringify(chosen(page)));
});
test('A click on the dot inside a button counts for that button', async () => {
const page = await loadPage();
button(page, 'green').querySelector('.dot').click();
assert.equal(chosen(page), 'Chosen: green', 'after clicking the dot in Green the page shows ' + JSON.stringify(chosen(page)));
});
test('Only the clicked button has the class active', async () => {
const page = await loadPage();
button(page, 'red').click();
button(page, 'blue').click();
assert.deepEqual(active(page), ['blue'], 'the buttons with the class active are ' + JSON.stringify(active(page)));
});
test('A click on the palette itself changes nothing', async () => {
const page = await loadPage();
page.document.querySelector('#palette').click();
assert.equal(chosen(page), 'No colour yet', 'after a click between the buttons the page shows ' + JSON.stringify(chosen(page)));
assert.deepEqual(active(page), [], 'the buttons with the class active are ' + JSON.stringify(active(page)));
});
test('A button added later works too', async () => {
const page = await loadPage();
const extra = page.document.createElement('button');
extra.type = 'button';
extra.dataset.color = 'gold';
extra.textContent = 'Gold';
page.document.querySelector('#palette').append(extra);
extra.click();
assert.equal(chosen(page), 'Chosen: gold', 'after clicking the new Gold button the page shows ' + JSON.stringify(chosen(page)));
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Palette</title>
</head>
<body>
<div id="palette">
<button type="button" data-color="red"><span class="dot"></span> Red</button>
<button type="button" data-color="green"><span class="dot"></span> Green</button>
<button type="button" data-color="blue"><span class="dot"></span> Blue</button>
</div>
<p id="chosen">No colour yet</p>
<script type="module" src="main.js"></script>
</body>
</html>
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Run the checks (needs learnrun.js in the same folder):
npm install jsdom@28.1.0
node --testExercise 2 of 2
The checklist sits inside the section #today, which counts every click inside it; keep that counter working. Write one click listener on #list: a click on an item's Remove button removes that item from items; a click anywhere else on an item toggles its done; a click on the list between the items changes nothing. Call render() after each change. The starter stops propagation, so the counter never moves, removes the item on every click, and on a click between the items closest('li') climbs past the list to #today and removes the first item.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads the JavaScript runner (up to 0.1 MB) and keeps it cached. Your code runs in your browser’s own engine and stays on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Run the tests: the counter stays at 0, a click on a text removes the item, and a click between the items removes the first one.
Delete event.stopPropagation(). Then const li = event.target.closest('li'), and return when !li || !list.contains(li): the list sits inside another li, #today.
Use event.target.closest('.remove') to tell a Remove click from any other click on the item, change items, and call render().
One way to solve it. Yours can look different and still pass the checks.
const list = document.querySelector('#list');
const items = [
{ text: 'Water the plants', done: false },
{ text: 'Buy bread', done: false },
{ text: 'Call Mum', done: false }
];
function render() {
const lis = items.map((item, index) => {
const li = document.createElement('li');
li.dataset.index = String(index);
if (item.done) li.classList.add('done');
const text = document.createElement('span');
text.textContent = item.text;
const remove = document.createElement('button');
remove.type = 'button';
remove.className = 'remove';
remove.textContent = 'Remove';
li.append(text, ' ', remove);
return li;
});
list.replaceChildren(...lis);
}
// Given: counts every click inside the Today section. Keep it working.
let clicks = 0;
document.querySelector('#today').addEventListener('click', () => {
clicks += 1;
document.querySelector('#clicks').textContent = String(clicks);
});
list.addEventListener('click', (event) => {
const li = event.target.closest('li');
if (!li || !list.contains(li)) return;
const index = Number(li.dataset.index);
if (event.target.closest('.remove')) {
items.splice(index, 1);
} else {
items[index].done = !items[index].done;
}
render();
});
render();
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
const list = document.querySelector('#list');
const items = [
{ text: 'Water the plants', done: false },
{ text: 'Buy bread', done: false },
{ text: 'Call Mum', done: false }
];
function render() {
const lis = items.map((item, index) => {
const li = document.createElement('li');
li.dataset.index = String(index);
if (item.done) li.classList.add('done');
const text = document.createElement('span');
text.textContent = item.text;
const remove = document.createElement('button');
remove.type = 'button';
remove.className = 'remove';
remove.textContent = 'Remove';
li.append(text, ' ', remove);
return li;
});
list.replaceChildren(...lis);
}
// Given: counts every click inside the Today section. Keep it working.
let clicks = 0;
document.querySelector('#today').addEventListener('click', () => {
clicks += 1;
document.querySelector('#clicks').textContent = String(clicks);
});
// TODO: Remove removes its item; a click elsewhere on an item toggles done.
list.addEventListener('click', (event) => {
event.stopPropagation(); // keep the click to ourselves
const li = event.target.closest('li');
items.splice(Number(li.dataset.index), 1);
render();
});
render();
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const item = (page, n) => page.document.querySelectorAll('#list li')[n];
const texts = (page) => [...page.document.querySelectorAll('#list li span')].map((span) => span.textContent);
const done = (page) => [...page.document.querySelectorAll('#list li')].map((li) => li.classList.contains('done'));
test('Remove takes out its item', async () => {
const page = await loadPage();
item(page, 1).querySelector('.remove').click();
assert.deepEqual(texts(page), ['Water the plants', 'Call Mum'], 'after removing Buy bread the list shows ' + JSON.stringify(texts(page)));
});
test('A click on the text marks the item done', async () => {
const page = await loadPage();
item(page, 0).querySelector('span').click();
assert.deepEqual(texts(page), ['Water the plants', 'Buy bread', 'Call Mum'], 'after clicking a text the list shows ' + JSON.stringify(texts(page)));
assert.deepEqual(done(page), [true, false, false], 'after clicking the first text, done is ' + JSON.stringify(done(page)));
});
test('A second click on the text marks it not done', async () => {
const page = await loadPage();
item(page, 2).querySelector('span').click();
item(page, 2).querySelector('span').click();
assert.deepEqual(done(page), [false, false, false], 'after two clicks on the last text, done is ' + JSON.stringify(done(page)));
});
test('A click on the list itself changes nothing', async () => {
const page = await loadPage();
page.document.querySelector('#list').click();
assert.deepEqual(texts(page), ['Water the plants', 'Buy bread', 'Call Mum'], 'after a click between the items the list shows ' + JSON.stringify(texts(page)));
const today = page.document.querySelector('#today').classList.contains('done');
assert.equal(today, false, 'the section Today got the class done');
});
test('Removing works again after the list is rebuilt', async () => {
const page = await loadPage();
item(page, 0).querySelector('.remove').click();
item(page, 0).querySelector('.remove').click();
assert.deepEqual(texts(page), ['Call Mum'], 'after removing the first item twice the list shows ' + JSON.stringify(texts(page)));
});
test('Clicks in the list still reach the section counter', async () => {
const page = await loadPage();
item(page, 0).querySelector('span').click();
item(page, 1).querySelector('.remove').click();
const clicks = page.document.querySelector('#clicks').textContent;
assert.equal(clicks, '2', 'after two clicks in the list the counter shows ' + JSON.stringify(clicks));
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Checklist</title>
</head>
<body>
<ul id="sections">
<li id="today">Today
<ul id="list"></ul>
</li>
</ul>
<p>Clicks in Today: <span id="clicks">0</span></p>
<script type="module" src="main.js"></script>
</body>
</html>
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
To run the page on your computer, open index.html through a local web server, not as a file: browsers do not run module scripts from file:// addresses. For the checks, install jsdom first (the commands below).
Run the checks (needs learnrun.js in the same folder):
npm install jsdom@28.1.0
node --testconst list = document.querySelector('#list');
list.addEventListener('click', (event) => {
const button = event.target.closest('button');
console.log('remove', button.closest('li').dataset.index);
});
// A click on the list itself, between the items:
list.click();
What Node.js prints
TypeError: Cannot read properties of null (reading 'closest')Why, and the fix
A delegated listener runs for every click inside the container, not only for clicks on buttons. When the click lands between the items, closest('button') finds no button and returns null. Check first and return early: if (!button || !list.contains(button)) return;. Firefox and Safari word this message differently.
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
const button = event.target.closest('button');
if (!button || !list.contains('button')) return;
console.log('remove', button.closest('li').dataset.index);
});
list.querySelector('button').click();
What Node.js prints
TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.Why, and the fix
closest takes a CSS selector, but contains takes a node: the element you found. Write list.contains(button), without quotes. It returns true when button is the list itself or anywhere inside it.
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
const item = event.closest('li');
console.log('clicked', item.dataset.index);
});
list.querySelector('button').click();
What Node.js prints
TypeError: event.closest is not a functionWhy, and the fix
The event object describes what happened; it is not an element, so it has no closest. Start from the element where the click happened: event.target.closest('li'). Firefox and Safari word this message differently.
JavaScript in the browser: your browser’s own engine, in a sandboxed worker. Syntax errors are located with acorn 8.18.0, MIT. Licence and source
5 questions, no hints. Score 80% or more to complete the lesson.
Finish every activity above to unlock the exit ticket.