Sensor: reading — Ereignis · JavaScript-Referenz

Signatur

sensor.addEventListener("reading", handler)

Beschreibung

Das Event reading gehört zur Generic Sensor API und wird an allen Unterklassen von Sensor ausgelöst, etwa Accelerometer, Gyroscope, Magnetometer, AmbientLightSensor, AbsoluteOrientationSensor oder GravitySensor. Es signalisiert, dass eine neue Messung vorliegt. Das Event-Objekt selbst ist ein einfaches Event ohne Messdaten. Die Werte liest man direkt von der Sensor-Instanz, z. B. sensor.x, sensor.illuminance oder sensor.quaternion, und ergänzend sensor.timestamp.

Einen Handler registriert man entweder mit sensor.addEventListener("reading", handler) oder über die Eigenschaft sensor.onreading = handler. Das Event kommt erst, wenn der Sensor mit sensor.start() aktiviert wurde. Beim ersten verfügbaren Messwert wird vorher einmalig das Event activate ausgelöst.

Wie oft das Event feuert, hängt von der beim Konstruktor angegebenen Option frequency (in Hz) und den Fähigkeiten der Hardware ab. Die tatsächliche Rate kann niedriger ausfallen als angefordert. Die Daten eignen sich für Bewegungssteuerung, Spiele, AR/VR, Schrittzähler oder die automatische Helligkeitsanpassung.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Event-Name, immer `"reading"`.
$handler Pflicht	(event: Event) => void		Callback, der bei jeder neuen Messung aufgerufen wird. Das übergebene `Event` enthält keine Messdaten. Die Werte stehen auf `event.target` bzw. der Sensor-Instanz.
$options	boolean \| AddEventListenerOptions	false	Übliche Listener-Optionen wie `once` oder `signal`, damit sich der Listener per `AbortController` entfernen lässt.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Die Messwerte liest man im Handler von der Sensor-Instanz.

Beispiele

Beschleunigung mit addEventListener auslesen

if ('Accelerometer' in window) {
  const acc = new Accelerometer({ frequency: 30 });

  acc.addEventListener('reading', () => {
    console.log(`x=${acc.x.toFixed(2)} y=${acc.y.toFixed(2)} z=${acc.z.toFixed(2)} m/s²`);
  });

  acc.addEventListener('error', (e) => {
    console.error('Sensorfehler:', e.error.name, e.error.message);
  });

  acc.start();
} else {
  console.warn('Accelerometer wird nicht unterstützt.');
}

x=0.12 y=-0.05 z=9.81 m/s² x=0.10 y=-0.07 z=9.80 m/s² …

onreading-Property mit Umgebungslicht-Sensor

const light = new AmbientLightSensor();

light.onreading = () => {
  const lux = light.illuminance;
  document.body.classList.toggle('dark-mode', lux < 50);
  console.log(`Helligkeit: ${lux} lx`);
};

light.onerror = (e) => console.error(e.error.name);
light.start();

Helligkeit: 32 lx

Nach Berechtigung starten und Listener wieder entfernen

const startGyro = async () => {
  const { state } = await navigator.permissions.query({ name: 'gyroscope' });
  if (state === 'denied') {
    console.warn('Zugriff auf Gyroskop verweigert.');
    return;
  }

  const gyro = new Gyroscope({ frequency: 60 });
  const controller = new AbortController();
  let samples = 0;

  const onReading = () => {
    samples++;
    console.log(`Drehrate z: ${gyro.z.toFixed(3)} rad/s (t=${gyro.timestamp.toFixed(0)})`);
    if (samples >= 100) {
      // Listener entfernen und Sensor stoppen, um Akku zu sparen
      gyro.removeEventListener('reading', onReading);
      controller.abort();
      gyro.stop();
    }
  };

  gyro.addEventListener('reading', onReading, { signal: controller.signal });
  gyro.start();
};

startGyro();

Drehrate z: 0.012 rad/s (t=10234) …

// Wichtig · Fallstricke

Browser-Unterstützung: Die Generic Sensor API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari unterstützen sie nicht. Vor der Nutzung sollte man die Verfügbarkeit prüfen, z. B. mit 'Accelerometer' in window, und notfalls auf devicemotion/deviceorientation ausweichen.
Sicherer Kontext und Berechtigungen: Die API funktioniert nur über HTTPS. In iframes muss sie per Permissions Policy freigegeben sein (z. B. allow="accelerometer; gyroscope"). Fehlende Rechte führen zu einem error-Event mit NotAllowedError und nicht zu einer Exception beim Konstruktor. Deshalb sollte man immer einen error-Handler registrieren.
Das Event trägt keine Daten. Die Werte immer von der Sensor-Instanz lesen. Vor dem ersten reading sind sie null.
Performance und Akku: Hohe Frequenzen erzeugen viele Events. Aufwendige DOM-Updates im Handler sollte man nicht direkt ausführen, sondern z. B. mit requestAnimationFrame bündeln. Nicht benötigte Sensoren mit stop() abschalten. In Hintergrund-Tabs pausiert der Browser die Events.
Datenschutz: Bewegungs- und Lichtsensoren können für Fingerprinting oder Seitenkanalangriffe missbraucht werden. Browser begrenzen deshalb teilweise die Frequenz und die Genauigkeit. AmbientLightSensor muss in Chrome zusätzlich per Flag aktiviert werden.

Siehe auch

Sensor Sensor.prototype.start() Sensor.prototype.stop() Sensor.timestamp Accelerometer Gyroscope Sensor: activate