Window : évènement focus

Syntaxe

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

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

onfocus = (event) => { }

Type d'évènement

Un FocusEvent. Hérite de UIEvent et Event.

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

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

CSS

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

JavaScript

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

Compatibilité des navigateurs

Voir aussi

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