Was ist das Ereignismodell im Browser?

Methode zur Handhabung von Benutzerinteraktionen (Klicks, Eingaben, Hover) und Systemereignissen (Seitenladen, Fehler) im Webbrowser.

Hauptkonzepte:

• Ereignis: Aktion, die stattgefunden hat.
• Ereignis-Handler: Funktion, die beim Eintreten des Ereignisses ausgeführt wird.
• Ereignisobjekt (Event object): Wird an den Handler übergeben und enthält Informationen über das Ereignis (Typ, Element, Koordinaten usw.).

Standardfluss der Ereignisse:

1. Capturing (Fangphase): Das Ereignis wandert vom obersten DOM-Element (Window, Document) zum Ziel-Element. Handler in dieser Phase werden zuerst ausgelöst.
2. Zielphase (Target phase): Das Ereignis erreicht das Ziel-Element, auf dem es passiert ist.
3. Bubbling (Blasphase): Das Ereignis steigt vom Ziel-Element durch den DOM-Baum bis zum Window auf. Handler in dieser Phase werden nach den Phasen Capture und Target ausgelöst.

Hinzufügen von Handlern:

• HTML-Attribute (onclick, onload): Veraltete Methode, nicht für komplexe Anwendungen empfohlen.
• DOM-Elementeigenschaften (element.onclick): Es kann nur ein Handler pro Ereignistyp pro Element zugewiesen werden.

  // Beispiel
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Button wurde gedrückt!');
  };
  

• Methode addEventListener: Bevorzugte Methode. Ermöglicht das Hinzufügen mehrerer Handler für ein Ereignis und die Steuerung der Phase (Capture oder Bubbling).

  // Beispiel
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klick auf den Button!', event);
  }, false); // false - Bubbling, true - Capture
  

Die Methode removeEventListener wird zum Entfernen von Handlern verwendet.

Event-Delegation: Anfügen eines Handlers an ein Elternelement, um Ereignisse von Kind-Elementen zu behandeln. Spart Ressourcen und vereinfacht die Arbeit mit dynamischem Inhalt.

// Beispiel für Delegation
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Klick auf Listenelement:', event.target.textContent);
    }
});