Window : évènement focus

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

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

L'opposé defocus estblur.

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

Syntaxe

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

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

Type d'évènement

UnFocusEvent. Hérite deUIEvent etEvent.

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

Cette interface hérite aussi des propriétés de son parentUIEvent, et indirectement deEvent.

FocusEvent.relatedTarget: UnEventTarget 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 surnull pour des raisons de sécurité.

Exemples

Exemple interactif

Cet exemple modifie l'apparence d'un document lorsqu'il perd la sélection. Il utiliseaddEventListener() pour surveiller les évènementsfocus etblur.

HTML

html

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

CSS

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);