Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Window : évènement focus

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

L'évènement focus est déclenché lorsqu'un élément reçoit la sélection.

L'opposé de focus est blur.

Cet évènement n'est pas annulable et ne se propage pas.

Syntaxe

Utiliser le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

js
addEventListener("focus", (event) => { })

onfocus = (event) => { }

Type d'évènement

Un FocusEvent. Hérite de UIEvent et Event.

Event UIEvent FocusEvent

Propriétés de l'évènement

Cette interface hérite aussi des propriétés de son parent UIEvent, et indirectement de Event.

FocusEvent.relatedTarget

Un EventTarget représentant une cible secondaire pour cet évènement. Dans certains cas (comme lors d'un passage par tabulation dans ou hors d'une page), cette propriété peut être définie sur null pour des raisons de sécurité.

Exemples

Exemple interactif

Cet exemple modifie l'apparence d'un document lorsqu'il perd la sélection. Il utilise addEventListener() pour surveiller les évènements focus et blur.

HTML

html
<p id="log">Cliquez sur ce document pour lui donner la sélection.</p>

CSS

css
.paused {
  background: #dddddd;
  color: #555555;
}

JavaScript

js
const log = document.getElementById("log");

function pause() {
  document.body.classList.add("paused");
  log.textContent = "SÉLECTION PERDUE !";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "Ce document a la sélection. Cliquez en dehors du document pour la perdre.";
}

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

Résultat

Spécifications

Specification
UI Events
# event-type-focus
HTML
# handler-onfocus

Compatibilité des navigateurs

Voir aussi

  • Évènement associé : blur
  • Cet évènement sur les cibles Element : évènement focus