PermissionStatus: change — Ereignis · JavaScript-Referenz

Signatur

permissionStatus.addEventListener("change", handler)

Beschreibung

Das change-Ereignis gehört zur Schnittstelle PermissionStatus, die du über navigator.permissions.query() bekommst. Es wird ausgelöst, sobald sich der Berechtigungsstatus (state) ändert. Mögliche Werte sind "granted", "denied" und "prompt".

Damit kann deine Anwendung auf Änderungen reagieren, ohne die Seite neu zu laden. Das gilt zum Beispiel, wenn der Nutzer in den Website-Einstellungen des Browsers den Standortzugriff entzieht oder nach einer Abfrage die Kamera freigibt. So lassen sich Bedienelemente passend ein- oder ausblenden, Hinweise anzeigen oder laufende Funktionen wie eine Standortverfolgung sauber beenden.

Du kannst den Listener mit addEventListener("change", handler) registrieren oder über die Eigenschaft onchange setzen. Das Ereignis ist ein einfaches Event ohne Zusatzdaten und lässt sich nicht abbrechen. Den neuen Status liest du aus event.target.state bzw. direkt aus dem PermissionStatus-Objekt.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier immer `"change"`.
$handler Pflicht	(event: Event) => void		Callback-Funktion. Sie bekommt ein `Event`, dessen `target` das betroffene `PermissionStatus`-Objekt ist.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen, z. B. `{ once: true }` oder `{ signal }` zum späteren Entfernen über einen `AbortController`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler bekommt ein Event-Objekt ohne besondere Zusatzeigenschaften.

Beispiele

Standortberechtigung mit addEventListener überwachen

const status = await navigator.permissions.query({ name: 'geolocation' });
console.log(`Aktueller Status: ${status.state}`);

status.addEventListener('change', (event) => {
  console.log(`Standort-Berechtigung geändert: ${event.target.state}`);
});

Aktueller Status: prompt Standort-Berechtigung geändert: granted

UI mit der onchange-Eigenschaft aktualisieren

const button = document.querySelector('#notify-btn');
const status = await navigator.permissions.query({ name: 'notifications' });

const updateUi = () => {
  button.disabled = status.state === 'denied';
  button.textContent = status.state === 'granted'
    ? 'Benachrichtigungen aktiv'
    : 'Benachrichtigungen erlauben';
};

updateUi();
status.onchange = updateUi; // ersetzt einen vorher gesetzten onchange-Handler

Listener entfernen und Standortverfolgung beenden

const status = await navigator.permissions.query({ name: 'geolocation' });
let watchId = null;

const handleChange = () => {
  if (status.state !== 'granted' && watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
    console.log('Tracking gestoppt, Berechtigung entzogen');
  }
};

if (status.state === 'granted') {
  watchId = navigator.geolocation.watchPosition((pos) => {
    console.log(pos.coords.latitude, pos.coords.longitude);
  });
}

status.addEventListener('change', handleChange);

// Später, z. B. beim Verlassen der Ansicht:
status.removeEventListener('change', handleChange);
status.onchange = null;

Tracking gestoppt, Berechtigung entzogen

// Wichtig · Fallstricke

Browser-Unterstützung: Wie gut die Permissions API funktioniert, hängt stark vom Browser ab. Safari unterstützt sie erst ab Version 16, und nicht jeder Browser kennt jeden Berechtigungsnamen. So lehnt Firefox etwa "camera" und "microphone" ab. Nicht unterstützte Namen führen zu einem TypeError bei query(), fange ihn deshalb mit try/catch ab.
Das Ereignis wird nur auf dem PermissionStatus-Objekt ausgelöst, bei dem du den Listener registriert hast. Wenn du query() mehrmals aufrufst, bekommst du jedes Mal ein neues Objekt. Behalte die Referenz also, sonst hängt der Listener am falschen Objekt oder wird unerwartet vom Garbage Collector entfernt.
Ob und wann das Ereignis nach einer Änderung in den Browsereinstellungen kommt, ist nicht einheitlich. Manche Browser lösen es erst aus, wenn der Tab wieder aktiv wird. Verlasse dich für sicherheitskritische Logik nicht nur auf change, sondern fange zusätzlich Fehler der eigentlichen API ab (z. B. NotAllowedError bei getUserMedia).
Die API steht nur in sicheren Kontexten (HTTPS) zur Verfügung. Eine Zuweisung an onchange überschreibt einen vorherigen Handler. Mit addEventListener kannst du dagegen mehrere Listener registrieren.

Siehe auch

PermissionStatus PermissionStatus.state Permissions.query() Navigator.permissions EventTarget.addEventListener() CookieStore: change DevicePosture: change