// B6.3 · ca. 30 Min. · Einstieg
Nach dieser Lektion reagiert Ihre Seite auf Klicks, Eingaben und Formulare: Sie fügen Listener hinzu und entfernen sie, lesen das Event-Objekt und verarbeiten ein Formular ohne Neuladen.
Danach können Sie
Aufwärmen · Aufgabe 1 von 7
const list = document.querySelector('#list');
const li = document.createElement('li');
li.textContent = 'b';
list.prepend(li);
console.log(list.textContent, list.children.length);Vorhersagen · Aufgabe 2 von 7
const field = document.querySelector('#name');
let n = 0;
field.addEventListener('input', () => {
n += 1;
});
field.value = 'cat';
console.log(n, field.value);Üben · Aufgabe 3 von 7
button.____('click', count);Üben · Aufgabe 4 von 7
Üben · Aufgabe 5 von 7
const buy = document.querySelector('#buy');
buy.addEventListener('click', (event) => {
console.log(event.target.id, event.currentTarget.id);
});
document.querySelector('#icon').click();Denksport · Aufgabe 6 von 7
const button = document.querySelector('#like');
let n = 0;
button.addEventListener('click', () => {
n += 1;
});
button.removeEventListener('click', () => {
n += 1;
});
button.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 einen Like-Button mit Zähler, ein Suchformular und einen Protokoll-Absatz. main.js fügt einen click-Listener hinzu, der zählt, einen zweiten mit { once: true }, einen submit-Listener, der preventDefault() aufruft und die Suche anzeigt, und einen keydown-Listener am Feld. Am Ende drückt das Skript seinen eigenen Button zweimal, schickt das Formular mit requestSubmit() ab und sendet die Taste Escape, so wie es die Tests der Übungen tun, damit Sie sehen, was jeder Listener bekommt.
main.js
const like = document.querySelector('#like');
const likes = document.querySelector('#likes');
const form = document.querySelector('#search');
const query = form.elements.query;
const log = document.querySelector('#log');
let count = 0;
like.addEventListener('click', (event) => {
count += 1;
likes.textContent = String(count);
console.log(event.type, event.target.id, count);
});
// once: this listener is removed after its first call.
like.addEventListener('click', () => console.log('thanks for the first like'), { once: true });
form.addEventListener('submit', (event) => {
event.preventDefault(); // handle it here: no page reload
log.textContent = 'Searching for ' + query.value.trim();
console.log(event.type, event.target.id, event.currentTarget === form);
});
query.addEventListener('keydown', (event) => {
console.log(event.type, event.key);
});
// The script tries its own page, the way the exercise tests do.
like.click();
like.click();
query.value = ' cats ';
form.requestSubmit();
query.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
console.log('likes shown:', likes.textContent);
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Listeners</title>
</head>
<body>
<button id="like" type="button">Like</button> <span id="likes">0</span>
<form id="search">
<input name="query" aria-label="Search">
<button>Search</button>
</form>
<p id="log">Nothing searched yet.</p>
<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
click like 1
thanks for the first like
click like 2
submit search true
keydown Escape
likes shown: 2
<!-- #log -->
<p id="log">Searching for cats</p>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
Während der Nutzer in #status tippt, soll sich die Seite bei jedem input-Event aktualisieren: #preview zeigt den Text genau so, wie er getippt wurde, als Text, und #count zeigt seine Länge von 40, etwa "5 / 40". Ist der Text länger als 40 Zeichen, bekommt #count die Klasse over; ist er wieder kurz genug, verschwindet sie. Der Starter hört auf change, das erst feuert, wenn das Feld den Fokus verliert, und aktualisiert nur die Vorschau.
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: Nichts ändert sich, weil die Tests input-Events senden und der Starter auf change hört.
Hören Sie auf 'input', lesen Sie field.value einmal in eine Konstante und setzen Sie beide textContent-Werte daraus.
Verwenden Sie if...else mit text.length > 40 und count.classList.add('over') oder remove('over').
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
const field = document.querySelector('#status');
const count = document.querySelector('#count');
const preview = document.querySelector('#preview');
field.addEventListener('input', () => {
const text = field.value;
preview.textContent = text;
count.textContent = text.length + ' / 40';
if (text.length > 40) {
count.classList.add('over');
} else {
count.classList.remove('over');
}
});
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 field = document.querySelector('#status');
const count = document.querySelector('#count');
const preview = document.querySelector('#preview');
// TODO: update the preview and the count on every input event.
field.addEventListener('change', () => {
preview.textContent = field.value;
});
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const type = (page, text) => {
const field = page.document.querySelector('#status');
field.value = text;
field.dispatchEvent(new page.window.Event('input', { bubbles: true }));
};
test('Tippen aktualisiert die Vorschau', async () => {
const page = await loadPage();
type(page, 'Hello');
const text = page.document.querySelector('#preview').textContent;
assert.equal(text, 'Hello', 'nach dem Tippen von Hello zeigt die Vorschau ' + JSON.stringify(text));
});
test('Der Zähler zeigt die Länge von 40', async () => {
const page = await loadPage();
type(page, 'Hello');
const text = page.document.querySelector('#count').textContent;
assert.equal(text, '5 / 40', 'nach dem Tippen von Hello zeigt der Zähler ' + JSON.stringify(text));
});
test('Markup im Text erscheint als Text', async () => {
const page = await loadPage();
type(page, '<b>hi</b>');
const preview = page.document.querySelector('#preview');
assert.equal(preview.children.length, 0, 'die Vorschau hat ' + preview.children.length + ' Element(e) aus dem Text gebaut');
});
test('Text über 40 Zeichen gibt dem Zähler die Klasse over', async () => {
const page = await loadPage();
type(page, 'x'.repeat(41));
const over = page.document.querySelector('#count').classList.contains('over');
assert.equal(over, true, 'nach 41 Zeichen hat der Zähler keine Klasse over');
});
test('Kürzerer Text entfernt die Klasse over wieder', async () => {
const page = await loadPage();
type(page, 'x'.repeat(41));
type(page, 'ok');
const over = page.document.querySelector('#count').classList.contains('over');
assert.equal(over, false, 'nach dem Kürzen hat der Zähler noch die Klasse over');
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Status</title>
</head>
<body>
<label for="status">Your status</label>
<input id="status">
<p id="count">0 / 40</p>
<p id="preview"></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
Beim submit soll das Formular den getrimmten Text seines Feldes entry als neues li zu #list hinzufügen und das Feld dann leeren. Ein leerer oder nur aus Leerzeichen bestehender Eintrag fügt nichts hinzu. Der Listener muss event.preventDefault() aufrufen, damit eine echte Seite nicht neu lädt. Escape im Feld leert es; andere Tasten lassen es in Ruhe. Der Starter fügt ungetrimmten Text und Leerzeichen hinzu, leert das Feld nie, bricht den submit nicht ab und ignoriert Escape.
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: " tea " wird mit seinen Leerzeichen hinzugefügt, Leereinträge werden hinzugefügt, und der submit wird nicht abgebrochen.
Geben Sie dem Listener den Parameter event und rufen Sie zuerst event.preventDefault() auf. Trimmen Sie den Wert und kehren Sie früh zurück, wenn er '' ist.
Für Escape: entry.addEventListener('keydown', (event) => { … }) und event.key mit 'Escape' vergleichen.
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
const form = document.querySelector('#add');
const list = document.querySelector('#list');
const entry = form.elements.entry;
form.addEventListener('submit', (event) => {
event.preventDefault();
const text = entry.value.trim();
if (text === '') return;
const li = document.createElement('li');
li.textContent = text;
list.append(li);
entry.value = '';
});
entry.addEventListener('keydown', (event) => {
if (event.key === 'Escape') entry.value = '';
});
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 form = document.querySelector('#add');
const list = document.querySelector('#list');
// TODO: cancel the submit, trim, skip blanks, clear the field after adding.
form.addEventListener('submit', () => {
const li = document.createElement('li');
li.textContent = form.elements.entry.value;
list.append(li);
});
// TODO: pressing Escape in the field clears it.
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';
const add = (page, text) => {
page.document.querySelector('#add').elements.entry.value = text;
page.document.querySelector('#add').requestSubmit();
};
const shown = (page) => [...page.document.querySelectorAll('#list li')].map((li) => li.textContent);
const field = (page) => page.document.querySelector('#add').elements.entry;
test('Abschicken fügt den Text zur Liste hinzu', async () => {
const page = await loadPage();
add(page, 'milk');
assert.deepEqual(shown(page), ['milk'], 'die Liste zeigt ' + JSON.stringify(shown(page)));
});
test('Der Text wird getrimmt und das Feld geleert', async () => {
const page = await loadPage();
add(page, ' tea ');
assert.deepEqual(shown(page), ['tea'], 'die Liste zeigt ' + JSON.stringify(shown(page)));
assert.equal(field(page).value, '', 'nach dem Hinzufügen enthält das Feld ' + JSON.stringify(field(page).value));
});
test('Ein leerer Eintrag fügt nichts hinzu', async () => {
const page = await loadPage();
add(page, ' ');
assert.deepEqual(shown(page), [], 'die Liste zeigt ' + JSON.stringify(shown(page)));
});
test('Der submit wird mit preventDefault() abgebrochen', async () => {
const page = await loadPage();
const form = page.document.querySelector('#add');
let cancelled = false;
form.addEventListener('submit', (event) => {
cancelled = event.defaultPrevented;
});
add(page, 'milk');
assert.equal(cancelled, true, 'das submit-Event wurde nicht abgebrochen');
});
test('Escape leert das Feld', async () => {
const page = await loadPage();
field(page).value = 'oops';
field(page).dispatchEvent(new page.window.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
assert.equal(field(page).value, '', 'nach Escape enthält das Feld ' + JSON.stringify(field(page).value));
});
test('Andere Tasten lassen das Feld in Ruhe', async () => {
const page = await loadPage();
field(page).value = 'tea';
field(page).dispatchEvent(new page.window.KeyboardEvent('keydown', { key: 'a', bubbles: true }));
assert.equal(field(page).value, 'tea', 'nach der Taste a enthält das Feld ' + JSON.stringify(field(page).value));
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping</title>
</head>
<body>
<form id="add">
<input name="entry" aria-label="New item">
<button>Add</button>
</form>
<ul id="list"></ul>
<p>Press Escape to clear the field.</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 --testfunction save(event) {
console.log('saved by', event.target.id);
}
document.querySelector('#save').addEventListener('click', save());
Was Node.js ausgibt
TypeError: Cannot read properties of undefined (reading 'target')Warum, und die Lösung
save() mit Klammern ruft die Funktion sofort auf, beim Laden der Seite, ohne Event, also ist event undefined. addEventListener soll die Funktion selbst bekommen, um sie später mit dem Event aufzurufen: addEventListener('click', save). Hätte save event nicht benutzt, gäbe es keinen Fehler, und der Klick würde einfach nichts tun. Firefox und Safari formulieren diese Meldung anders.
const form = document.querySelector('#add');
// The field is <input name="item">: read what it starts with.
const start = form.elements.item.value.trim();
console.log(start);
Was Node.js ausgibt
TypeError: Cannot read properties of undefined (reading 'trim')Warum, und die Lösung
form.elements ist eine Sammlung, und jede Sammlung hat eine Methode item(index). Diese Methode hat Vorrang vor einem Feld namens item, form.elements.item ist also eine Funktion, und ihr value ist undefined. In einem Listener würde li.textContent = form.elements.item.value sogar still scheitern und nichts anzeigen. Nehmen Sie form.elements.namedItem('item') oder geben Sie dem Feld einen anderen Namen, etwa entry.
const buttons = document.querySelectorAll('button');
buttons.addEventListener('click', () => console.log('clicked'));
Was Node.js ausgibt
TypeError: buttons.addEventListener is not a functionWarum, und die Lösung
Listener gehören zu einzelnen Elementen; eine NodeList hat kein addEventListener. Fügen Sie jedem Button in einer Schleife einen hinzu: for (const button of buttons) button.addEventListener('click', …). Lektion B6.4 zeigt einen besseren Weg für viele gleichartige Elemente: einen Listener an ihrem gemeinsamen Elternelement.
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.