# Warum feuert mein Event-Handler zweimal?

Canonical page: https://blame76.com/snippets/javascript/2026-09-17-warum-feuert-mein-event-handler-zweimal/
Category: Snippets
Type: JavaScript
Published: 2026-09-17
Updated: 2026-09-17
Tags: javascript, events, event-listener, debugging, dom

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

```javascript
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

```javascript
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.