Plusieurs événements peuvent-être déclenchés sur une page. Heureusement, il est possible d'écouter ces événements grâce à la méthode addEventListener() et de déclencher une fonction en guise de rétroaction.

Par exemple, un internaute peut cliquer sur un bouton (événement). Puisque cet événement est anticipé (écouté), un item est ajouté dans un panier lorsqu'il se produit (fonction).

Prenons un exemple encore plus simple. Un bouton HTML sur lequel nous désirons écouter les événements de type "click" afin d'écrire "Bonjour" dans la console lorsqu'il est cliqué.

<button class="btn">Afficher un message</button>

Il serait possible en JavaScript de faire:

const btn = document.querySelector('.btn');

function showMsg() {
  console.log("Bonjour");
}

btn.addEventListener("click", showMsg);

Anatomie

const btn

Variable contenant l'élément sur lequel l'événement devrait se produire.

function showMsg()

Fonction écrivant "Bonjour" dans la console.

addEventListener("click", showMsg)

addEventListener indique qu'un événement doit être écouté sur l'élément se trouvant à la gauche du point (btn). La chaine de caractères "click" correspond au nom du type d'événement à écouter et l'élément après la virgule (showMsg) à la fonction à appeler lorsque l'événement se produit.

Fonction anonyme

Certaines fonctions ne sont utiles que dans un contexte précis, par exemple lorsqu'un événement se produit. Dans ce cas, il est superflus de leurs attribuer un nom afin de pouvoir les invoquer ailleurs. Ces fonctions sont connues sous le nom de fonctions anonymes.

Par exemple:

const btn = document.querySelector('.btn');

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

L'objet d'événement

Dès qu'un événement se produit, JavaScript génère un objet contenant le détail de l'événement en question et le passe à la fonction invoquée.

Exemple d'objet d'événement:

MouseEvent {
  ctrlKey: false,
  target: div.btn,
  x: 100,
  y: 200,
  ...
}

Cet objet nous indique par exemple si la touche ctrl était enfoncée au moment du clic, quel élément a été cliqué, à quelle position X et Y le clic a eu lieu, ainsi que plusieurs autres informations utiles.

Pour récupérer cet objet, il suffit de nommer un paramètre dans la fonction appelée. Ce paramètre est souvent nommé "event" ou "e" par convention, mais il pourrait porter n'importe quel nom.

Fonction standard

function showMsg(event) {
  console.log(event);
}

btn.addEventListener("click", showMsg);

Puisque le premier paramètre envoyé à une fonction invoquée via addEvenListener est toujours l'objet de l'événement même, il suffit de nommer l'objet reçu afin de pouvoir y faire référence.

Fonction anonyme

btn.addEventListener("click", function(event) {
  console.log(event);
});

Tout comme les fonctions standards, il suffit de nommer un paramètre dans la fonction invoquée afin d'avoir accès à l'objet de l'événement.