Window : évènement focus
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
L'évènement focus
est déclenché lorsqu'un élément reçoit la sélection.
L'opposé de focus
est blur
.
Cet évènement n'est pas annulable et ne se propage pas.
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
.
-
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 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 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
Specification |
---|
UI Events> # event-type-focus> |
HTML> # handler-onfocus> |
Compatibilité des navigateurs
Loading…