Tutoriel : Les écouteurs d'évènements

Les écouteurs d'évènements sont très faciles à utiliser et nous permettent d'avoir des interactions avec le document en cours. Grâce à eux, du code ne fonctionnera que lorsque l'utilisateur effectuera une action.

Un utilisateur a des interactions avec une page Web : il clique, fait défiler, remplis un formulaire… Tous ces évènements peuvent être interceptés et en retour, lancer une action.

addEventListener

Pour cela, un écouteur devra être déclaré sur l'élément souhaité du DOM ; il faudra attribuer l'évènement à écouter et enfin, associer l'action qui sera exécutée quand l'évènement sera réalisé.

Prenons l'exemple d'une action à exécuter aux clics sur un bouton :

<button type="button">Valider</button>

<script>
  let button = document.querySelector('button');
  button.addEventListener('click', function() {
    alert('Clic ok!');
  });
</script>

La méthode addEventListener() prend deux arguments : le premier, l'évènement qui doit être écouté et le second, l'action qui doit être exécutée.

Dans mon exemple, j'ai mis l'action directement dans la méthode en passant par une fonction anonyme. Il est tout à fait possible d'utiliser une fonction callback et de dissocier les deux.

<button type="button">Valider</button>

<script>
  let button = document.querySelector('button');
  button.addEventListener('click', actionClick);

  function actionClick() {
    alert('Ok click!');
  } 
</script>

Dans un cas de figure comme celui-ci, notez bien qu'il s'agit de donner le nom de la fonction à appeler à la méthode addEventListener() !

removeEventListener

Tout comme il est possible d'attacher un écouteur d'évènement sur un élément, il est possible de le détacher. Pour cela, on reprend les mêmes informations initiales : évènement et action.

<script>
  let button = document.querySelector('button');
  button.removeEventListener('click', actionClick);
</script>

Tout simplement ! ?‍♂️

Les évènements

Il existe plusieurs évènements écoutables :

click : le clic d'un élément
mouseenter : quand la souris passe par dessus un élément
mouseleave : quand la souris sort d'un élément
keydown : quand une touche du clavier est enfoncée
keyup : quand une touche du clavier est relâchée
scroll : quand on fait défiler le document
resize : quand la fenêtre est redimensionnée
change : quand une valeur sur un élément est modifiée (input, select, textarea…)
submit : quand un formulaire est soumis

Chargement du DOM

Avant d'exécuter du code JavaScript sur un DOM, il est intéressant d'attendre que celui-ci soit chargé, ce qui évitera de nombreuses erreurs ?.

Pour cela, deux possibilités s'offrent à vous. La première est la suivante :

document.addEventListener('DOMContentLoaded', function() {
    alert('Document ready!');
});

Cette méthode attend que le document soit chargé, mais elle n'attend pas que les images soient prêtes, donc en cas de traitement sur des images, des erreurs peuvent ressortir, notamment que le poids d'une image soit égal à zéro. Normal, pour JavaScript, elle n'existe pas, car le code est exécuté avant que cette image soit chargée.

On a alors une deuxième solution :

// Peut s'écrire aussi
// window.addEventListener('load', ma_fonction);
window.onload = function() {
  alert('Document ready!');
}

Cette méthode attend que tout soit bien chargé, images comprises.