JavaScript

Events

Events verbinden Nutzeraktionen mit Code: Klicks, Eingaben, Tastendrücke und mehr.

addEventListener

addEventListener verbindet ein Ereignis mit einer Funktion.

Häufige Events: click, input, change, submit, keydown.

Klick-Listener

const button = document.querySelector('#speichern');

button.addEventListener('click', () => {
  console.log('Gespeichert!');
});

Das Event-Objekt

Der Listener erhält ein Event-Objekt mit Details: event.target ist das auslösende Element, event.key die gedrückte Taste.

event.preventDefault() unterbindet das Standardverhalten, etwa das Neuladen beim Formular-Absenden.

<event.target><preventDefault()>

Tastatur

window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    schliesseDialog();
  }
});

Bubbling und Delegation

Events steigen vom Ziel nach oben durch die Eltern (Bubbling).

Event-Delegation nutzt das aus: ein Listener am Container behandelt Klicks aller Kinder — auch später hinzugefügter.

Delegation

document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    console.log('Eintrag:', event.target.textContent);
  }
});

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.