Window: devicemotion — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("devicemotion", handler)

Beschreibung

Das Ereignis devicemotion wird am window-Objekt in festen Abständen ausgelöst, solange das Gerät einen Beschleunigungssensor bzw. ein Gyroskop hat. Der Handler bekommt ein DeviceMotionEvent mit diesen Eigenschaften:

acceleration: Beschleunigung ohne Schwerkraft (x, y, z in m/s²)
accelerationIncludingGravity: Beschleunigung inklusive Schwerkraft
rotationRate: Drehrate (alpha, beta, gamma in Grad pro Sekunde)
interval: Abstand zwischen zwei Messungen in Millisekunden

Typische Einsatzfälle sind Schüttelgesten („Schütteln zum Rückgängigmachen“), Schrittzähler, Spiele mit Neigungssteuerung und Parallax-Effekte. Den Handler registrierst du mit window.addEventListener("devicemotion", handler) oder über die Eigenschaft window.ondevicemotion.

Das Ereignis feuert sehr oft, meist 60-mal pro Sekunde oder häufiger. Halte den Handler deshalb schlank und lagere aufwendige Arbeit zum Beispiel in requestAnimationFrame aus. Auf iOS muss der Nutzer den Zugriff vorher ausdrücklich erlauben, und zwar über DeviceMotionEvent.requestPermission().

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"devicemotion"`.
$handler Pflicht	(event: DeviceMotionEvent) => void		Callback-Funktion, die bei jeder Messung ein `DeviceMotionEvent` bekommt.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `passive`, `once` oder `signal` (zum Abmelden per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener hat keinen Rückgabewert. Der Handler bekommt ein DeviceMotionEvent.

Beispiele

Beschleunigungswerte anzeigen

const handleMotion = (event) => {
  const { x, y, z } = event.accelerationIncludingGravity ?? {};
  const rate = event.rotationRate ?? {};
  console.log(`Beschl.: x=${x?.toFixed(2)} y=${y?.toFixed(2)} z=${z?.toFixed(2)}`);
  console.log(`Drehrate: alpha=${rate.alpha?.toFixed(1)} Intervall=${event.interval} ms`);
};

window.addEventListener("devicemotion", handleMotion);

Beschl.: x=0.12 y=0.35 z=9.79 Drehrate: alpha=0.4 Intervall=16 ms

Berechtigung auf iOS anfragen (per Button-Klick)

const startButton = document.querySelector("#start");

startButton.addEventListener("click", async () => {
  if (typeof DeviceMotionEvent?.requestPermission === "function") {
    const state = await DeviceMotionEvent.requestPermission();
    if (state !== "granted") {
      console.warn("Bewegungssensor-Zugriff verweigert");
      return;
    }
  }
  window.addEventListener("devicemotion", (e) => {
    console.log("z:", e.acceleration?.z);
  });
});

z: 0.03

Schüttelgeste erkennen und Listener wieder entfernen

const THRESHOLD = 15; // m/s²
let lastShake = 0;

const onShake = (event) => {
  const a = event.acceleration;
  if (!a || a.x === null) return;
  const strength = Math.hypot(a.x, a.y, a.z);
  const now = Date.now();
  if (strength > THRESHOLD && now - lastShake > 1000) {
    lastShake = now;
    console.log("Gerät geschüttelt!");
    // Nach der ersten Erkennung abmelden
    window.removeEventListener("devicemotion", onShake);
  }
};

window.addEventListener("devicemotion", onShake);

Gerät geschüttelt!

Alternative über die on-Property

window.ondevicemotion = (event) => {
  console.log("Intervall:", event.interval, "ms");
};

// Später abmelden:
setTimeout(() => {
  window.ondevicemotion = null;
}, 5000);

Intervall: 16 ms

// Wichtig · Fallstricke

Sicherer Kontext: Das Ereignis kommt nur auf HTTPS-Seiten (oder localhost) an. In iframes kann eine Berechtigungsrichtlinie (Permissions-Policy: accelerometer, gyroscope) den Zugriff zusätzlich einschränken.
iOS Safari (ab 13): Du musst DeviceMotionEvent.requestPermission() aufrufen, und zwar innerhalb einer Nutzeraktion wie einem Klick. Ohne diese Erlaubnis feuert das Ereignis nie.
Werte können null sein: Geräte ohne Gyroskop liefern für rotationRate und teils für acceleration nur null. Prüfe die Werte deshalb immer, bevor du rechnest.
Desktop-Browser: Manche Browser lösen das Ereignis auch ohne Sensor aus, dann aber mit null-Werten. Ein registrierter Listener beweist also nicht, dass ein Sensor vorhanden ist.
Leistung: Das Ereignis kommt sehr häufig. Führe im Handler keine teuren DOM-Operationen aus, sondern bündele Änderungen per requestAnimationFrame oder begrenze die Aufrufrate (Throttling).
Datenschutz: Aus Bewegungsdaten lassen sich Nutzer wiedererkennen (Fingerprinting) und teils sogar Eingaben erschließen. Frag den Zugriff deshalb nur an, wenn du ihn wirklich brauchst.
Als moderne Alternative gibt es die Generic-Sensor-API mit Accelerometer und Gyroscope. Sie wird aber bislang nur von Chromium-Browsern unterstützt.

Siehe auch

Window: deviceorientation Accelerometer IDBDatabase: close Window: beforeprint Window: resize