Window : évènement focus
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 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.
js
addEventListener("focus", (event) => { })
onfocus = (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
html
<p id="log">Cliquez sur ce document pour lui donner la sélection.</p>
CSS
css
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
js
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-focus |
| HTML # handler-onfocus |