MINT üben

Ereignisse und Klicks

Dreißig Übungen zu Ereignissen — Listener anhängen, Funktionen übergeben und Abläufe nachverfolgen.

Dein Fortschritt:
0 / 0 Aufgaben
1

Übungsaufgaben

Dreißig Übungen in gemischter Reihenfolge — du klickst, ziehst, ordnest, rechnest und knobelst. Jede Übung gibt dir sofort eine Rückmeldung, und zu jeder Aufgabe gibt es zwei gestufte Tipps: Der erste zeigt die Richtung, der zweite den entscheidenden Schritt. Die Chips zeigen das Anforderungsniveau: AFB I heißt wiedergeben und direkt anwenden, AFB II selbst entscheiden und verknüpfen, AFB III begründen, beurteilen oder eine Falle durchschauen. Aufgaben mit dem Chip Mix verbinden Wissen aus früheren Unterkapiteln, bei Trick steckt eine Falle drin. Fährst du über ein unterstrichenes Arbeitswort, siehst du, was es genau von dir verlangt.

A1
Wie oft läuft welche Funktion?
AFB II

Vergleiche, wie oft zaehleA (A) und zaehleB (B) bei den Abläufen laufen, und setze das passende Zeichen.

let a = 0;
let b = 0;
function zaehleA() { a = a + 1; }
function zaehleB() { b = b + 1; }
knopf.addEventListener("click", zaehleA);
document.addEventListener("keydown", zaehleB);
Wähle in jeder Zeile, wie die linke Seite zur rechten steht, und prüfe dann alle auf einmal. Mit der Tastatur: ←/→ wählt, ↑/↓ wechselt die Zeile, Enter prüft.
  • A nach: Klick, Taste, Klick
    B nach: Klick, Taste, Klick
  • A nach: Taste, Taste
    B nach: Taste, Taste
  • A nach: Klick, Taste
    B nach: Taste, Klick
  • A nach: Klick, Klick, Klick
    B nach: Klick, Klick, Klick
zaehleA hängt am click des Knopfes, zaehleB am keydown der Seite: Jede Funktion läuft nur bei ihrem eigenen Ereignis, die Reihenfolge spielt keine Rolle.
Welche Funktion gehört zu welchem Ereignis?
Zähle für jeden Ablauf: Wie viele Klicks, wie viele Tasten?
A2
Jetzt oder später?
AFB I

Erstelle zwei Stapel: Sortiere jede Zeile danach, ob die Funktion sofort beim Laden läuft oder erst bei einem Ereignis.

Schiebe die oberste Karte auf den passenden Stapel: ziehen, einen der beiden Stapel-Knöpfe drücken oder auf der Karte ←/→. Eine abgelegte Karte holst du mit Klick oder Enter zurück. „Prüfen“ schickt falsch abgelegte Karten mit einem Hinweis zurück in den Stapel.
start();
click-Listener mit start
click-Listener mit start()
mouseover-Listener mit zeige
let ergebnis = rechne(3);
keydown-Listener mit taste
Nur Zeilen, in denen die Funktion mit Klammern steht, laufen sofort. Bei addEventListener wird die Funktion ohne Klammern übergeben und später vom Browser aufgerufen.
Steht hinter dem Funktionsnamen eine runde Klammer? Dann wird die Funktion jetzt aufgerufen.
Auch innerhalb von addEventListener(…) bedeutet eine Klammer hinter dem Namen: sofort ausführen.
A3
Runterzählen
AFB I

Jemand klickt dreimal auf den Knopf. Bestimme die Anzeige danach.

let n = 10;
knopf.addEventListener("click", minus);
function minus() {
  n = n - 2;
  anzeige.textContent = n;
}
Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Jeder Klick ruft minus auf: 10 → 8 → 6 → 4. Die Variable n merkt sich den Stand zwischen den Klicks, weil sie außerhalb der Funktion angelegt ist.
Bei jedem Klick läuft die Funktion minus einmal.
n steht außerhalb der Funktion und behält seinen Wert zwischen den Klicks.