Événements et gestionnaire d’événements

Les événements sont des actions qui peuvent être déclenchées par l’utilisateur, comme le clic sur un bouton, la saisie de texte dans un formulaire, etc. En javascript, nous pouvons utiliser les gestionnaires d’événements pour exécuter du code en réponse à ces événements.

Événements courants en Javascript

Il existe de nombreux événements courants qui sont fréquemment utilisés en Javascript. Voici quelques exemples :

• click : déclenché lorsque l’utilisateur clique sur un élément
• mouseover : déclenché lorsque l’utilisateur passe la souris sur un élément
• submit : déclenché lorsque l’utilisateur soumet un formulaire
• focus : déclenché lorsque l’utilisateur met le focus sur un élément (par exemple en cliquant dans un champ de formulaire)

Il existe de nombreux autres événements qui peuvent être déclenchés lors de l’interaction de l’utilisateur, tels que « change », « keyup », « keydown », etc. Vous pouvez trouver une liste plus complète des événements : https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Ajouter un gestionnaire d’événements à un élément

Il existe plusieurs manières d’ajouter un gestionnaire d’événements à un élément du DOM. La première méthode consiste à utiliser la propriété de l’élément en question. Par exemple, pour ajouter un gestionnaire de clic à un bouton :

const button = document.querySelector('button');
button.onclick = function() {
    console.log('Bouton cliqué');
}

Il est également possible d’utiliser la méthode addEventListener, qui permet d’ajouter plusieurs gestionnaires d’événements à un élément :

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focus');
});
input.addEventListener('blur', function() {
    console.log('Input blur');
});

Il est également possible d’utiliser la méthode removeEventListener pour retirer un gestionnaire d’événements d’un élément :

// notre fonction anonyme
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// On ajoute notre événement
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Plus tard dans le code, nous retirons cette événement pour X ou Y raisons
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

Dans cet exemple, le gestionnaire d’événements « click » associé à la fonction « maFonctionAnonyme » sera retiré du bouton.

Conclusion

En utilisant les événements et les gestionnaires d’événements, vous pouvez créer des interactions en temps réel avec votre site web et rendre votre site plus dynamique et agréable à utiliser pour les utilisateurs. Le prochain chapitre présente les modules et les importations/exportations (ES6), qui découpent le code en fichiers, les classes, elles, sont détaillées dans l’article sur les classes en JavaScript.