# Gebeurtenissen

> Luister naar het openen, sluiten en vastleggen van toestemming van de checkout met on() en off(), en begrijp de regel van één listener per gebeurtenis.

De checkout koppelt terug aan je pagina wat deze doet. Abonneer je met `on()`:

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

## Eén listener per gebeurtenisnaam

`on()` slaat **één** callback per gebeurtenisnaam op. Het registreren van een tweede callback voor dezelfde naam vervangt de eerste – deze wordt niet toegevoegd:

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

`off()` verwijdert alles wat voor een naam is geregistreerd. Eventuele callbacks die je eraan doorgeeft, worden genegeerd, dus `off('checkout.closed', b)` en `off('checkout.closed')` doen hetzelfde.

Als verschillende onderdelen van je pagina op dezelfde gebeurtenis moeten reageren, registreer dan één callback en verspreid dit vanuit die callback verder.

## Je tegelijk op meerdere gebeurtenissen abonneren

Beide methoden accepteren een door spaties gescheiden tekenreeks of een array met namen, waarbij voor elke naam dezelfde callback wordt geregistreerd:

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

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

## De payload

Elke callback ontvangt één object:

| Veld | Type | Beschrijving |
|---|---|---|
| `name` | string | De gebeurtenisnaam, handig wanneer één callback er meerdere afhandelt. |
| `context` | object | Bevat `eventID` – het evenement waartoe deze checkout behoort. |
| `data` | object | Gebeurtenisspecifieke details. |

## Beschikbare gebeurtenissen

| Naam | Wanneer deze wordt geactiveerd |
|---|---|
| `checkout.ready` | De checkout is geladen en klaar voor interactie. Dit is ook het moment waarop de client de `clientContext` overdraagt die je aan `book()` hebt doorgegeven. |
| `checkout.closed` | De checkout is gesloten. De client ruimt het paneel of venster op en wist de achtergrondlaag. |
| `checkout.consent` | De bezoeker heeft de melding over de voorwaarden beantwoord. `data.consent` is `true` wanneer deze akkoord is gegaan, en de client onthoudt dit zodat de stap de volgende keer wordt overgeslagen. |

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

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

## Listeners blijven bestaan na afzonderlijke boekingen

Listeners horen bij de instantie, niet bij een boeking. Registreer ze één keer, nadat je de client hebt gemaakt, en ze gelden voor elke `book()`-aanroep. Gebruik `payload.context.eventID` om boekingen van elkaar te onderscheiden:

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

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

Het aanroepen van `destroy()` stopt ze allemaal – de instantie luistert dan helemaal niet meer naar berichten van de checkout.

## Berichten van andere bronnen worden genegeerd

De client accepteert alleen berichten van de Entase-checkoutorigin, dus niet-gerelateerd `postMessage`-verkeer op je pagina bereikt je callbacks nooit.