Warum feuert mein Event-Handler zweimal?

Ein Klick erzeugt zwei Requests oder eine Aktion läuft doppelt. Der offensichtliche Verdacht ist „Browser-Bug“ – meistens ist aber die Initialisierung mehrfach gelaufen oder du beobachtest zwei verschiedene Event-Wege.

Erst beweisen, was doppelt ist

function handleSave(event) {
  console.trace('handleSave', {
    type: event.type,
    target: event.target,
    currentTarget: event.currentTarget,
  });
}

button.addEventListener('click', handleSave);

console.trace() zeigt nicht nur dass der Handler läuft, sondern über welchen Call-Stack die Registrierung/Verarbeitung erreicht wurde.

Häufige Ursachen

• Initialisierungsfunktion wird zweimal aufgerufen.
• Dasselbe Script wird doppelt eingebunden.
• Delegierter Listener am Elternknoten plus direkter Listener am Kind.
• Formular verarbeitet sowohl Button-click als auch submit.
• Komponente wird neu gemountet, ohne alten Listener zu entfernen.

Registrierung messbar machen

console.count('bind save handler');
button.addEventListener('click', handleSave);

Wenn der Count schon beim Laden auf 2 steigt, brauchst du nicht am Event selbst weiterzusuchen.

Besser als ein globales Flag

Ein alreadyInitialized = true kann Symptome verdecken. Interessanter ist zuerst: Warum läuft die Initialisierung mehrfach? Erst wenn Mehrfachinitialisierung fachlich erlaubt ist, sollte die Komponente idempotent gebaut oder sauber aufgeräumt werden.