# Ereignisse

> Reagieren Sie mit on() und off() auf das Öffnen und Schließen des Checkouts sowie auf die Einwilligungserfassung, und verstehen Sie die Regel „ein Listener pro Ereignis“.

Der Checkout meldet Ihrer Seite, was er gerade tut. Abonnieren Sie Ereignisse mit `on()`:

```js
entase.on('checkout.ready', payload => {
  console.log('checkout open for', payload.context.eventID);
});
```

## Ein Listener pro Ereignisname

`on()` speichert **einen** Callback pro Ereignisname. Wenn Sie einen zweiten Callback für denselben Namen registrieren, wird der erste ersetzt – er wird nicht hinzugefügt:

```js
entase.on('checkout.closed', a);
entase.on('checkout.closed', b);   // a is gone; only b runs
```

`off()` entfernt alles, was für einen Namen registriert ist. Dabei wird jeder übergebene Callback ignoriert, daher bewirken `off('checkout.closed', b)` und `off('checkout.closed')` dasselbe.

Wenn mehrere Bereiche Ihrer Seite auf dasselbe Ereignis reagieren müssen, registrieren Sie einen Callback und verteilen Sie die Verarbeitung darin weiter.

## Mehrere Ereignisse gleichzeitig abonnieren

Beide Methoden akzeptieren eine durch Leerzeichen getrennte Zeichenfolge oder ein Array von Namen und registrieren denselben Callback für jeden Namen:

```js
entase.on('checkout.ready checkout.closed', payload => {
  console.log(payload.name);
});

entase.off(['checkout.ready', 'checkout.closed']);
```

## Die Nutzdaten

Jeder Callback erhält ein Objekt:

| Feld | Typ | Beschreibung |
|---|---|---|
| `name` | Zeichenfolge | Der Ereignisname, nützlich, wenn ein Callback mehrere Ereignisse verarbeitet. |
| `context` | Objekt | Enthält `eventID` – das Ereignis, zu dem dieser Checkout gehört. |
| `data` | Objekt | Ereignisspezifische Details. |

## Verfügbare Ereignisse

| Name | Auslösung |
|---|---|
| `checkout.ready` | Der Checkout wurde geladen und ist zur Interaktion bereit. Zu diesem Zeitpunkt übergibt der Client auch den `clientContext`, den Sie an `book()` übergeben haben. |
| `checkout.closed` | Der Checkout wurde geschlossen. Der Client entfernt das Panel oder Fenster und löscht den Hintergrund. |
| `checkout.consent` | Der Besucher hat den Hinweis zu den Bedingungen beantwortet. `data.consent` ist `true`, wenn die Bedingungen akzeptiert wurden, und der Client speichert dies, sodass dieser Schritt beim nächsten Mal übersprungen wird. |

```js
entase.on('checkout.closed', () => {
  document.body.classList.remove('checkout-open');
});

entase.on('checkout.consent', payload => {
  if (payload.data.consent) console.log('terms accepted');
});
```

## Listener bleiben über einzelne Buchungen hinweg erhalten

Listener gehören zur Instanz, nicht zu einer Buchung. Registrieren Sie sie einmal nach dem Erstellen des Clients; sie gelten dann für jeden Aufruf von `book()`. Verwenden Sie `payload.context.eventID`, um Buchungen voneinander zu unterscheiden:

```js
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });

entase.on('checkout.closed', payload => {
  refreshAvailability(payload.context.eventID);
});
```

Der Aufruf von `destroy()` beendet alle Listener – die Instanz empfängt dann überhaupt keine Nachrichten mehr vom Checkout.

## Nachrichten aus anderen Quellen werden ignoriert

Der Client akzeptiert nur Nachrichten vom Entase-Checkout-Ursprung, sodass nicht zusammenhängender `postMessage`-Datenverkehr auf Ihrer Seite Ihre Callbacks niemals erreicht.