De manière générale, un évènement correspond à une action qui est détectée par le système lorsqu'elle se produit. Chaque évènement peut être écouté, cela signifie que l'on peut demander au système de nous tenir informé lorsqu'il se produit.

On pourra alors répondre à cet évènement en lui attachant un code qui sera exécuté à chaque fois qu'il se produit. Par exemple, je souhaite ajouter une nouvelle ligne dans un tableau HTML en cliquant sur un bouton, alors je vais créer une fonction capable d'ajouter cette ligne.

Introduction

JavaScript permet de gérer un grand nombre d'évènements qui ont lieu dans le DOM grâce à son interface Event. Parmi eux, on peut citer notamment les évènements générés par l'utilisateur comme par exemple :

• Le clic sur un élément de la page (bouton, div, paragraphe ...),
• Le survol d'un élément ou d'une zone avec la souris,
• La saisie d'une touche du clavier,
• ... et bien plus encore ! ...

Gestionnaire d'évènement

Pour écouter et répondre à un évènement, il est nécessaire de définir un gestionnaire d'évènement. Un gestionnaire d'évènement est toujours défini en deux parties :

• Une première partie qui va servir à écouter l'évènement,
• Une deuxième partie qui va contenir le code qui doit être exécuté lorsque l'évènement se produit (en général, il s'agit d'une fonction).

En JavaScript, il existe trois façons d'implémenter un gestionnaire d'évènement en utilisant :

• Des attributs HTML de type évènement,
• Des propriétés JavaScript liées aux évènements,
• La méthode addEventListener().

Utiliser les attributs HTML pour gérer un évènement

L'utilisation d'attributs HTML pour prendre en charge un évènement existe toujours mais son utilisation n'est plus recommandée par la communauté des développeurs JavaScript car elle oblige quelque part à avoir du code HTML et du code JavaScript mélangé dans le même fichier.

L'idée est donc ici d'insérer le gestionnaire d'évènement en tant qu'attribut HTML dans la balise ouvrante de l'élément à partir duquel le déclenchement de l'évènement associé à ce gestionnaire va pouvoir être détecté.

Les attributs HTML désignant un gestionnaire d'évènement porte un nom du type onevent où event représente le type d'évènement qui doit être écouté comme par exemple :

• onclick pour détecter le clic sur un élément,
• onkeypress pour détecter l'appui sur une touche,
• onmouseover pour détecter le passage de la souris sur un élément,
• etc...

On passe ensuite à ces attributs une valeur qui représente le code JavaScript à exécuter lors du déclenchement de l'évènement. La plupart du temps, il s'agit d'une fonction.

Voici un exemple :

• Code HMTL :

<div>
    <button onclick="afficherTexte()">Cliquez pour afficher le texte</button>
    <p id="text"></p>
</div>

• Code JavaScript :

// Fonction appelée par le gestionnaire d'évènement onclick associé au bouton
function afficherTexte() {
    const p_text = document.getElementById("text");
    
    p_text.textContent = "Bonjour VemoTech.fr !";
}

Dans cet exemple, on crée un bouton sur la page Web et on lui associe en attribut le gestionnaire d'évènement onclick. Un clic sur ce bouton déclenchera alors l'exécution du code JavaScript contenu dans la fonction afficherTexte() qui est passée en valeur.

• Avant le clic sur le bouton :

• Après le clic :

Utiliser les propriétés JavaScript pour gérer un évènement

En JavaScript, les gestionnaires d'évènement font parties des propriétés que l'on peut utiliser entre-autre sur un objet de type Element. Ces propriétés portent des noms similaires à ceux des attributs HTML vus précédemment.

On passe également à ces propriétés une valeur qui représente le code JavaScript à exécuter lors du déclenchement de l'évènement. Généralement, il s'agit d'une fonction anonyme.

Par exemple :

• Code HTML :

<button id="btn1">Cliquez pour afficher le texte</button>
<p id="text"></p>

• Code JavaScript :

const btn1 = document.getElementById("btn1");    // Référence vers le bouton 
const p_text = document.getElementById("text");

/*
*  On associe le gestionnaire d'évènement onclick au bouton 
*  et on définit la fonction anonyme qui sera appelée par ce gestionnaire
*/
btn1.onclick = function() {
    p_text.textContent = "Bonjour VemoTech.fr !";
}

Dans cet exemple, on attribue au bouton un identifiant "btn1" et on crée une référence vers ce bouton dans le code JavaScript. On utilise ensuite la propriété onclick sur cette référence pour détecter et gérer le clic sur le bouton.

Le rendu visuel est similaire à l'exemple précédent mais la particularité est de ne pas rajouter dans la balise <button> un attribut onclick(), mais bien de réaliser l'action onclick() grâce à l'ID du bouton. On affecte à cette propriété une fonction anonyme contenant le code qui sera exécuté lorsque l'utilisateur cliquera sur le bouton.

Utiliser la méthode "addEventListener()" pour gérer un évènement

Cette dernière possibilité pour gérer les évènements en JavaScript est la plus récente et la plus recommandée par la communauté des développeurs. La méthode addEventListener() peut être utilisée avec un objet de type Element pour lui associer un ou plusieurs gestionnaires d'évènement.

Cette méthode va prendre en argument le nom de l'évènement qui doit être géré et le code (une fonction) qui doit être exécuté lors du déclenchement de cet évènement.

Exemple :

• Code HTML :

<button id="btn1">Cliquez pour afficher le texte</button>
<p id="text"></p>

• Code JavaScript :

const btn1 = document.getElementById("btn1");    // Référence vers le bouton 
const p_text = document.getElementById("text");

// On utilise la méthode addEventListener() pour gérer le clic sur le bouton
btn1.addEventListener('click', function () {
    p_text.textContent = "Bonjour VemoTech.fr !";
});

Dans cet exemple, on attribue au bouton un identifiant "btn1" et on crée une référence vers ce bouton dans le code JavaScript. Cette référence est un objet de type Element. On peut donc utiliser la méthode addEventListener() sur cette référence pour lui associer un gestionnaire d'évènement.

On passe en paramètre le nom de l'évènement pour lequel ce gestionnaire doit être enregistré (ici 'click') et la fonction anonyme contenant le code qui sera exécuté en réponse à cet évènement.

Il est tout à fait possible d'utiliser une fonction nommée à la place d'une fonction anonyme, dans ce cas, il suffit de la définir en dehors de la méthode addEventListener() et de passer son nom en argument.

Exemple :

const btn1 = document.getElementById("btn1");    // Référence vers le bouton 
const p_text = document.getElementById("text");

// La fonction afficherTexte() contient le code qui sera exécuté lorsque l'utilisateur cliquera sur le bouton
btn1.addEventListener('click', afficherTexte);

function afficherTexte() {
   p_text.textContent = "Bonjour VemoTech.fr !";
}

Contrairement aux deux possibilités vues précédemment, la méthode addEventListener() permet de réagir plusieurs fois et de manière différente à un même évènement.

Exemple :

const btn1 = document.getElementById("btn1");
const p_text = document.getElementById("text");

btn1.addEventListener('click', afficherTexte);
btn1.addEventListener('click', mettreEnGras);

function afficherTexte() {
    p_text.textContent = "Bonjour VemoTech.fr !";
}

function mettreEnGras() {
    p_text.style.fontWeight = 'bold';
}

Dans cet exemple, les fonctions afficherTexte() et mettreEnGras()seront systématiquement exécutées lorsque l'utilisateur cliquera sur le bouton.

Annuler le comportement par défaut d'un évènement

Dans certains cas, on peut être amené à désactiver le comportement par défaut d'un évènement pour pouvoir le traiter comme on le souhaite en JavaScript. Par exemple, pour gérer le clic sur un lien <a> en JavaScript, il faut d'abord désactiver le comportement normal de ce lien pour empêcher le navigateur de charger une nouvelle page.

Dans ce cas, il faut appeler la méthode preventDefault() sur l'objet évènement en question.

Exemple :

• Code HTML :

<a id="modif">Modifier</a>
<p id="text">Bonjour !</p>

• Code JavaScript :

const a_modif = document.getElementById("modif");
const p_text = document.getElementById("text");

a_modif.addEventListener('click', modifier);

function modifier(e) {
  // On désactive le comportement par défaut du lien
  e.preventDefault();
  // On peut maintenant traiter le clic de la souris ici
  p_text.textContent = "Au revoir !";
}