L'évènementblur est déclenché lorsqu'un élément perd la sélection.

L'opposé deblur estfocus.

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

Syntaxe

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

addEventListener("blur", (event) => { })onblur = (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

<p>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 deDocument.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 lebody du document.

Voir aussi

• Évènement associé :focus
• Cet évènement sur les ciblesElement : évènementblur