---
title: Proximity
slug: WebAPI/Proximity
tags:
  - WebAPI
translation_of: Web/API/Proximity_Events
---
<p>{{ SeeCompatTable }}</p>
<h2 id="Résumé">Résumé</h2>
<p>Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.</p>
<div class="note">
  <p><strong>Note :</strong> Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.</p>
</div>
<h2 id="Événements_de_proximité">Événements de proximité</h2>
<p>Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.</p>
<p>Cet événement peut être capturé en utilisant un objet au niveau <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.</p>
<p>Une fois qu'il a été capturé, l'événement donne accès à différentes informations :</p>
<ul>
  <li>L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.</li>
  <li>L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut <code>true</code> si l'objet est proche ou <code>false</code> si l'objet est loin.</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: js">window.addEventListener('userproximity', function(event) {
  if (event.near) {
    // extinction de l'écran
    navigator.mozPower.screenEnabled = false;
  } else {
    // allumage de l'écran
    navigator.mozPower.screenEnabled = true;
  }
});</pre>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td>
      <td>{{ Spec2('Proximity Events') }}</td>
      <td>Spécification initiale</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>{{domxref("DeviceProximityEvent")}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatVersionUnknown()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
      <tr>
        <td>{{domxref("UserProximityEvent")}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatVersionUnknown()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>{{domxref("DeviceProximityEvent")}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{ CompatGeckoMobile("15.0") }}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
      <tr>
        <td>{{domxref("UserProximityEvent")}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatVersionUnknown()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li>{{domxref("DeviceProximityEvent")}}</li>
  <li>{{domxref("UserProximityEvent")}}</li>
  <li>{{event("deviceproximity")}}</li>
  <li>{{event("userproximity")}}</li>
</ul>