Window : évènement blur
Baseline
Large disponibilité
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ènement blur est déclenché lorsqu'un élément perd la sélection.
L'opposé de blur est focus.
Cet évènement n'est pas annulable et ne se propage pas.
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.
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
| Spécification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
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 reçoit la sélection, tandis que Firefox et Chrome la définissent souvent sur le body du document.