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.
Tutoriel Javascript
- 1 - Introduction à Javascript
- 2 - Variables et types de données
- 3 - Opérateurs et expressions
- 4 - Les conditions (if, switch)
- 5 - Boucles (for, foreach, while)
- 6 - Les fonctions
- 7 - Les objets
- 8 - Propriétés et méthodes de l’objet Math
- 9 - Manipulation de la page HTML avec Javascript
- 10 - Événements et gestionnaire d’événements
- 11 - Introduction aux classes et aux objets en Javascript (ES6)
- 12 - Gestion des erreurs et débogage
- 13 - Intro aux modules et import/export (ES6)
- 14 - TP jeu de devinette
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.