Ereignisse und Klicks

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);

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 hängt einen weiteren Zuhörer an — zweimal angehängt heißt zweimal ausgeführt.
• 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.

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.