We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

L'événement blur est déclenché quand un élément a perdu le focus. La principale différence entre cet événement et focusout est que seulement ce dernier se propage.

Informations générales

Spécification
DOM L3
Interface
FocusEvent
Propagation
Non
Annulable
Non
Cible
Element
Action par défaut
Aucune

Note : La valeur de Document.activeElement varie selon le navigateur durant le traitement de l'événement (bug 452307): IE10 le met sur l'élément vers lequel le focus se déplacera, tandis que Firefox et le Chrome le mettent souvent sur le body du document.

Propriétés

Property Type Description
target Lecture seule EventTarget Event target (DOM element)
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not.
cancelable Lecture seule Boolean Whether the event is cancellable or not.
relatedTarget Lecture seule EventTarget (DOM element) null

Délégation d'événement

Il y a deux possibilités pour implémenter la délégation d'événement pour ce type d'événement:

  • En utilisant l'événement focusout pour les navigateurs qui le supportent (tous sauf Firefox)
  • En définissant le paramère useCapture de addEventListener a true

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";    
}, true);
form.addEventListener("blur", function( event ) {
  event.target.style.background = "";    
}, true);

Compatibilités navigateur

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Bureau Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support basique 5 (Oui)[1] ? ? ?
Mobile Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basique ? ? ? ? ? ?

[1] Avant gecko 24(Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) l'interface pour cet événement était Event, et non FocusEvent. Voir (bug 855741).

Evénements liés

Étiquettes et contributeurs liés au document

Contributeurs à cette page : gloucklegnou, fscholz, Kalwyn
Dernière mise à jour par : gloucklegnou,