// B6.4 · ca. 32 Min. · Einstieg
Nach dieser Lektion kennen Sie den Weg eines Klicks durch die Seite, unterscheiden target von currentTarget, und ein einziger Listener auf einer Liste bedient jeden Eintrag darin, auch später hinzugefügte.
Danach können Sie
Aufwärmen · Aufgabe 1 von 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);Vorhersagen · Aufgabe 2 von 7
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
console.log(event.target.tagName, event.currentTarget.tagName);
});
document.querySelector('#first').click();Üben · Aufgabe 3 von 7
const item = event.target.____('li');Üben · Aufgabe 4 von 7
Üben · Aufgabe 5 von 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(', '));Denksport · Aufgabe 6 von 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);Anwenden · Aufgabe 7 von 7
Prüfen Sie Ihr Ergebnis anhand dieser Liste
Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.
Ausgearbeitetes Beispiel
Die Seite hat eine leere Liste. main.js hält die Aufgaben in einem Array und baut die Einträge mit render(), wie in Lektion B6.2. Ein einziger Klick-Listener auf der Liste bedient jeden Done-Button: Er findet den Button mit closest, prüft, dass er zur Liste gehört, schaltet die Aufgabe um und rendert neu. Zwei Listener auf body zeigen die Reihenfolge der Phasen. Eine dritte Aufgabe kommt nach dem Listener hinzu, und das Skript klickt dann ihren Done-Button und die Liste selbst, so wie es die Tests der Übungen tun.
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>
Um die Seite auf Ihrem Computer auszuführen, öffnen Sie index.html über einen lokalen Webserver, nicht als Datei: Browser führen Modul-Skripte von file://-Adressen nicht aus. Für die Prüfungen installieren Sie zuerst jsdom (die Befehle unten).
Ausgabe
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 rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Ihre Seite
Ihre Seite läuft in einem abgeschotteten Rahmen. Sie hat keinen Zugriff auf diese Website, und ihr localStorage liegt nur für diesen Lauf im Speicher: Der nächste Lauf beginnt leer.
Führen Sie das Programm aus, um seine Seite hier zu sehen.
Übung 1 von 2
Ersetzen Sie die drei Listener des Starters durch einen einzigen Klick-Listener auf #palette. Ein Klick auf einen Farb-Button oder auf den Punkt darin zeigt in #chosen "Chosen: " plus das data-color des Buttons und gibt diesem Button, und nur diesem, die Klasse active. Ein Klick auf die Palette zwischen den Buttons ändert nichts. Auch ein später zur Palette hinzugefügter Button muss funktionieren. Der Starter liest event.target.dataset.color, das undefined ist, wenn der Klick auf dem Punkt landet, und neue Buttons bekommen keinen Listener.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Ihre Seite
Ihre Seite läuft in einem abgeschotteten Rahmen. Sie hat keinen Zugriff auf diese Website, und ihr localStorage liegt nur für diesen Lauf im Speicher: Der nächste Lauf beginnt leer.
Führen Sie das Programm aus, um seine Seite hier zu sehen.
Führen Sie die Tests aus: Der Punkt ergibt "Chosen: undefined", nichts bekommt die Klasse active, und der Button Gold tut nichts.
Ein Listener: palette.addEventListener('click', (event) => { … }). Darin const button = event.target.closest('button'), und return, wenn !button || !palette.contains(button).
Entfernen Sie active zuerst in einer Schleife von jedem Button, fügen Sie es dann dem geklickten hinzu, und lesen Sie button.dataset.color, nicht event.target.dataset.color.
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
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;
});
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
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('Ein Klick auf einen Button zeigt seine Farbe', async () => {
const page = await loadPage();
button(page, 'red').click();
assert.equal(chosen(page), 'Chosen: red', 'nach dem Klick auf Red zeigt die Seite ' + JSON.stringify(chosen(page)));
});
test('Ein Klick auf den Punkt im Button zählt für diesen Button', async () => {
const page = await loadPage();
button(page, 'green').querySelector('.dot').click();
assert.equal(chosen(page), 'Chosen: green', 'nach dem Klick auf den Punkt in Green zeigt die Seite ' + JSON.stringify(chosen(page)));
});
test('Nur der geklickte Button hat die Klasse active', async () => {
const page = await loadPage();
button(page, 'red').click();
button(page, 'blue').click();
assert.deepEqual(active(page), ['blue'], 'die Buttons mit der Klasse active sind ' + JSON.stringify(active(page)));
});
test('Ein Klick auf die Palette selbst ändert nichts', async () => {
const page = await loadPage();
page.document.querySelector('#palette').click();
assert.equal(chosen(page), 'No colour yet', 'nach einem Klick zwischen die Buttons zeigt die Seite ' + JSON.stringify(chosen(page)));
assert.deepEqual(active(page), [], 'die Buttons mit der Klasse active sind ' + JSON.stringify(active(page)));
});
test('Auch ein später hinzugefügter Button funktioniert', 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', 'nach dem Klick auf den neuen Button Gold zeigt die Seite ' + 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 sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
Um die Seite auf Ihrem Computer auszuführen, öffnen Sie index.html über einen lokalen Webserver, nicht als Datei: Browser führen Modul-Skripte von file://-Adressen nicht aus. Für die Prüfungen installieren Sie zuerst jsdom (die Befehle unten).
Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):
npm install jsdom@28.1.0
node --testÜbung 2 von 2
Die Checkliste steht im Abschnitt #today, der jeden Klick darin zählt; dieser Zähler soll weiter funktionieren. Schreiben Sie einen einzigen Klick-Listener auf #list: Ein Klick auf den Remove-Button eines Eintrags entfernt diesen Eintrag aus items; ein Klick an anderer Stelle eines Eintrags schaltet sein done um; ein Klick auf die Liste zwischen den Einträgen ändert nichts. Rufen Sie nach jeder Änderung render() auf. Der Starter stoppt die Ausbreitung, sodass der Zähler stehen bleibt, entfernt den Eintrag bei jedem Klick, und bei einem Klick zwischen die Einträge klettert closest('li') über die Liste hinaus zu #today und entfernt den ersten Eintrag.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Ihre Seite
Ihre Seite läuft in einem abgeschotteten Rahmen. Sie hat keinen Zugriff auf diese Website, und ihr localStorage liegt nur für diesen Lauf im Speicher: Der nächste Lauf beginnt leer.
Führen Sie das Programm aus, um seine Seite hier zu sehen.
Führen Sie die Tests aus: Der Zähler bleibt bei 0, ein Klick auf einen Text entfernt den Eintrag, und ein Klick zwischen die Einträge entfernt den ersten.
Löschen Sie event.stopPropagation(). Dann const li = event.target.closest('li'), und return, wenn !li || !list.contains(li): Die Liste liegt in einem anderen li, #today.
Unterscheiden Sie mit event.target.closest('.remove') einen Klick auf Remove von jedem anderen Klick auf den Eintrag, ändern Sie items und rufen Sie render() auf.
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
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();
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
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 entfernt seinen Eintrag', async () => {
const page = await loadPage();
item(page, 1).querySelector('.remove').click();
assert.deepEqual(texts(page), ['Water the plants', 'Call Mum'], 'nach dem Entfernen von Buy bread zeigt die Liste ' + JSON.stringify(texts(page)));
});
test('Ein Klick auf den Text markiert den Eintrag als erledigt', async () => {
const page = await loadPage();
item(page, 0).querySelector('span').click();
assert.deepEqual(texts(page), ['Water the plants', 'Buy bread', 'Call Mum'], 'nach einem Klick auf einen Text zeigt die Liste ' + JSON.stringify(texts(page)));
assert.deepEqual(done(page), [true, false, false], 'nach dem Klick auf den ersten Text ist done ' + JSON.stringify(done(page)));
});
test('Ein zweiter Klick auf den Text hebt die Markierung auf', async () => {
const page = await loadPage();
item(page, 2).querySelector('span').click();
item(page, 2).querySelector('span').click();
assert.deepEqual(done(page), [false, false, false], 'nach zwei Klicks auf den letzten Text ist done ' + JSON.stringify(done(page)));
});
test('Ein Klick auf die Liste selbst ändert nichts', async () => {
const page = await loadPage();
page.document.querySelector('#list').click();
assert.deepEqual(texts(page), ['Water the plants', 'Buy bread', 'Call Mum'], 'nach einem Klick zwischen die Einträge zeigt die Liste ' + JSON.stringify(texts(page)));
const today = page.document.querySelector('#today').classList.contains('done');
assert.equal(today, false, 'der Abschnitt Today hat die Klasse done bekommen');
});
test('Entfernen funktioniert auch nach dem Neuaufbau der Liste', async () => {
const page = await loadPage();
item(page, 0).querySelector('.remove').click();
item(page, 0).querySelector('.remove').click();
assert.deepEqual(texts(page), ['Call Mum'], 'nach zweimaligem Entfernen des ersten Eintrags zeigt die Liste ' + JSON.stringify(texts(page)));
});
test('Klicks in der Liste erreichen weiter den Zähler des Abschnitts', 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', 'nach zwei Klicks in der Liste zeigt der Zähler ' + 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 sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
Um die Seite auf Ihrem Computer auszuführen, öffnen Sie index.html über einen lokalen Webserver, nicht als Datei: Browser führen Modul-Skripte von file://-Adressen nicht aus. Für die Prüfungen installieren Sie zuerst jsdom (die Befehle unten).
Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):
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();
Was Node.js ausgibt
TypeError: Cannot read properties of null (reading 'closest')Warum, und die Lösung
Ein delegierter Listener läuft bei jedem Klick im Container, nicht nur bei Klicks auf Buttons. Landet der Klick zwischen den Einträgen, findet closest('button') keinen Button und liefert null. Prüfen Sie zuerst und kehren Sie früh zurück: if (!button || !list.contains(button)) return;. Firefox und Safari formulieren diese Meldung anders.
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();
Was Node.js ausgibt
TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.Warum, und die Lösung
closest nimmt einen CSS-Selektor, contains aber einen Knoten: das Element, das Sie gefunden haben. Schreiben Sie list.contains(button), ohne Anführungszeichen. Es liefert true, wenn button die Liste selbst ist oder irgendwo darin liegt.
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
const item = event.closest('li');
console.log('clicked', item.dataset.index);
});
list.querySelector('button').click();
Was Node.js ausgibt
TypeError: event.closest is not a functionWarum, und die Lösung
Das Event-Objekt beschreibt, was passiert ist; es ist kein Element und hat daher kein closest. Beginnen Sie bei dem Element, auf dem geklickt wurde: event.target.closest('li'). Firefox und Safari formulieren diese Meldung anders.
JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.