Comment détecter en JavaScript quand un élément perd le focus ?

En JavaScript, vous pouvez détecter quand un élément perd le focus en utilisant l'événement blur. Cet événement se déclenche lorsque l'utilisateur quitte l'élément en question, soit en cliquant sur un autre élément, soit en appuyant sur la touche Tab pour passer à l'élément suivant.

Voici un exemple de code qui utilise l'événement blur pour détecter quand un champ de saisie de texte perd le focus :

const inputElement = document.querySelector('input');

inputElement.addEventListener('blur', function() {
  console.log('Le champ de saisie a perdu le focus.');
});

Dans cet exemple, nous sélectionnons un champ de saisie de texte à l'aide de la méthode querySelector, puis nous ajoutons un écouteur d'événements à cet élément en utilisant la méthode addEventListener. Lorsque l'événement blur se produit, la fonction de rappel est appelée et affiche un message dans la console.

Il est également possible d'utiliser l'attribut HTML onblur pour définir une fonction de rappel directement dans le code HTML :

<input type="text" onblur="console.log('Le champ de saisie a perdu le focus.')">

Cependant, il est généralement préférable d'utiliser la méthode addEventListener pour ajouter des écouteurs d'événements en JavaScript plutôt que d'utiliser des attributs HTML pour des raisons de séparation des préoccupations et de maintenabilité du code.