Window : évènement blur

Syntaxe

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

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

onblur = (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

La valeur de Document.activeElement varie selon les navigateurs pendant le traitement de cet évènement (bogue Firefox 452307 ^(angl.)) : IE10 la définit sur l'élément qui recevra la sélection, tandis que Firefox et Chrome la définissent souvent sur le body du document.

Voir aussi

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