É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. Dans le prochain chapitre, nous verrons comment utiliser les classes et les objets en Javascript (ES6) pour créer des structures de données plus complexes et modulaires.

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.