Utiliser les événements de luminosité

Experimental

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

Les événements concernant la lumière environnante permettent à une application de percevoir simplement les changements de luminosité dans l'environnement de l'appareil. L'application peut donc ainsi réagir aux changements de luminosité : par exemple changer le contraste de l'interface ou changer l'exposition lors de la prise d'une photo.

Les événements liés à la lumière

Lorsque le capteur de lumière détecte un changement de luminosité, il envoie une notification au navigateur. Lorsque le navigateur reçoit une notification, il déclenche un événement DeviceLightEvent (en-US) qui fournit des informations sur la valeur exacte de l'intensité lumineuse.

Cet événement peut être capturé au niveau de l'objet window en utilisant la méthode addEventListener (en utilisant le nom d'événement devicelight) ou en attachant le gestionnaire d'événément à la propriété window.ondevicelight.

Une fois qu'il a été capturé, l'événement permet un accès à la valeur de l'intensité lumineuse, exprimée en lux avec la propriété DeviceLightEvent.value (en-US).

Exemple

window.addEventListener('devicelight', function(event) {
  var html = document.getElementsByTagName('html')[0];

  if (event.value < 50) {
    html.classList.add('darklight');
    html.classList.remove('brightlight');
  } else {
    html.classList.add('brightlight');
    html.classList.remove('darklight');
  }
});

Spécifications

Spécification Statut Commentaires
Ambient Light Sensor
La définition de 'Ambient Light Events' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi