MINT üben

Ereignisse und Klicks

Ein Programm, das erst loslegt, wenn jemand klickt — woher weiß JavaScript, dass gerade geklickt wurde?

1

Ereignisse und Event-Listener

Bisher liefen Programme einmal von oben nach unten. Interaktive Seiten warten: Erst wenn etwas passiert, läuft ein bestimmter Teil.

  • Ereignis (Event):etwas, das auf der Seite passiert: Klick, Tastendruck, Eingabe, Maus fährt über ein Element.
  • click:Mausklick oder Tippen auf ein Element; bei Knöpfen auch Enter.
  • dblclick / mouseover:Doppelklick bzw. Maus fährt über das Element.
  • keydown / input:Taste gedrückt bzw. Inhalt eines Eingabefelds geändert.
  • Event-Listener:ein „Zuhörer“ am Element, der bei einem bestimmten Ereignis eine Funktion startet.
const knopf = document.querySelector("#knopf");
let klicks = 0;
function zaehle() {
  klicks = klicks + 1;
  knopf.textContent = "Geklickt: " + klicks;
}
knopf.addEventListener("click", zaehle);
Merke

Ereignis: Etwas, das auf der Seite passiert, z. B. click, dblclick, mouseover, keydown, input.

Event-Listener: Ein „Zuhörer“ am Element, der bei einem bestimmten Ereignis eine Funktion startet.

Interaktiv: Die Seite wartet, erst wenn etwas passiert, läuft ein bestimmter Teil.

2

Funktion übergeben, nicht aufrufen

In addEventListener("click", zaehle) steht die Funktion ohne Klammern: Der Browser bekommt den Baustein und ruft ihn selbst auf, sobald geklickt wird.

  • zaehle:der Name allein übergibt die Funktion — sie läuft bei jedem Klick.
  • zaehle():mit Klammern läuft sie sofort einmal beim Laden; übergeben wird ihr Ergebnis, der Knopf bleibt danach stumm.
  • Mehrere Listener:jeder addEventListener-Aufruf mit einer anderen Funktion hängt einen weiteren Zuhörer an; dieselbe Funktion ein zweites Mal anzuhängen bewirkt nichts.
  • Ereignis-Objekt:der Browser übergibt der Funktion Infos, z. B. event.key bei keydown.
  • EVA im Kleinen:Ereignis → Variable ändern → Anzeige aktualisieren.

Klicke, doppelklicke und fahre mit der Maus über beide Knöpfe (Tastatur: Tab zum Knopf, Enter = Klick, zweimal schnell Enter = Doppelklick, Fokus = Überfahren). Links steht immer das richtige Programm, rechts eine Variante aus dem Balken. Die Zeitleiste legt beide Ereignisfolgen übereinander.

Zwei Programme im Vergleich

Halte fest: Ein Listener reagiert nur auf sein Ereignis, und die Funktion wird ohne Klammern übergeben — mit Klammern läuft sie einmal beim Laden und nie wieder.

Merke

Listener: element.addEventListener("ereignis", funktionsname);

Funktion übergeben: Der Name steht ohne Klammern; der Browser ruft die Funktion selbst bei jedem Ereignis auf. Mit Klammern läuft sie einmal beim Laden und der Knopf bleibt stumm.

Mehrere: Jeder Aufruf hängt einen weiteren Zuhörer an; der Browser übergibt Infos, z. B. event.key.

3

Allgemeine Hinweise

Ereignisname in Anführungszeichen

Richtig ist "click" — ohne on davor und kleingeschrieben. "onclick" oder "Click" lösen nie aus, ohne Fehlermeldung.

Mit console.log testen

Schreibe als erste Zeile in die Funktion console.log("geklickt");. Erscheint nichts, hängt der Listener am falschen Element oder am falschen Ereignis.

Knöpfe statt Divs

Für Klickflächen <button> verwenden: Er ist per Tastatur erreichbar und löst click auch mit Enter aus.

Videos