AddEventListener() intermédiaire

Nous avons vu jusqu'à présent l'écoute d'événements de type "click" via addEventListener(). Cependant, il existe plusieurs autres types d'événements possible à écouter grâce à addEventListener().

Voyons en quelques uns:

Type souris 🖱

  • mousedown lorsque le clic de la souris est enfoncé

  • mouseup lorsque le clic de la souris est relâché

  • mouseenter dès que la souris commence à survoler un élément

  • mousemove à chaque fois que la souris se déplace au dessus d'un élément

  • mouseout quand la souris cesse de survoler un élément

  • etc.

Par exemple, pour écouter l'événement mouseenter, il serait possible de faire:

btn.addEventListener("mouseenter", function() { 
  console.log("Bonjour");
});

CodePen | smnarnold 👀

Type clavier ⌨️

Les événements associés au clavier sont utile afin de valider des changements dans un champs de formulaire ou encore sur le document entier si le but est d'écouter si un raccourcis clavier a été activé.

  • keydown lorsqu'une touche est enfoncée

  • keyup lorsqu'une touche est relâchée

Les objets d'événement fournis par ces événements sont particulièrement pratiques puisqu'ils contiennent des informations importantes, telles que: Quelle touche a été activée.

Par exemple, pour savoir quelle touche est enfoncée:

document.addEventListener("keydown", function(event) { 
  console.log(event.key);
});

Type focus

Les éléments à même de recevoir le focus émettent un événement lorsqu'ils reçoivent ou perdent le focus.

  • focus lorsqu'un champ reçoit le focus. 

  • blur lorsqu'un champ perd le focus.

Par exemple:

btn.addEventListener("focus", function() { 
  console("A reçu le focus");
});

Type page

Certains événements, bien que non exclusif au document, sont particulièrement utiles avec celui-ci.

  • DOMContentLoaded lorsque le DOM a fini de charger, mais avant que les images et styles ailles terminés.

  • load lorsque le DOM, les images et styles ont terminés de charger.

  • scroll lorsque le document défile

  • resize lorsque le document est redimensionné

Par exemple:

document.addEventListener("DOMContentLoaded", function() { 
  console("Le DOM à fini de charger");
});

Type formulaire

Certains événements peuvent être liés à des éléments de formulaire tel que des champs texte, boutons radio, etc.

  • input lorsque la valeur d'un champ est modifiée.

  • change lorsque la valeur d'un champ est différente au moment de perdre le focus.

  • submit lorsqu'un formulaire est soumis.

Par exemple:

fields.addEventListener("change", function() { 
  console("La valeur du champs a changée");
});