E- La gestion d’évènements en JavaScript et la méthode addEventListener
Les évènements sont des actions qui se produisent et auxquelles on va pouvoir répondre en exécutant un code. Par exemple, on va pouvoir afficher ou cacher du texte suite à un clic d’un utilisateur sur un élément, on change la taille d’un texte lors du passage de la souris d’un utilisateur sur un élément.
Les évènements et leur prise en charge sont l’un des mécanismes principaux du JavaScript qui vont nous permettre d’ajouter un vrai dynamisme à nos pages Web.
Présentation et première définition des évènements
En JavaScript, un évènement est une action qui se produit et qui possède deux caractéristiques essentielles :
- C’est une action qu’on peut « écouter », c’est-à-dire une action qu’on peut détecter car le système va nous informer qu’elle se produit ;
- C’est une action à laquelle on peut « répondre », c’est-à-dire qu’on va pouvoir attacher un code à cette action qui va s’exécuter dès qu’elle va se produire.
Définir des gestionnaires d’évènements
Un gestionnaire d’évènements est toujours divisé en deux parties : une partie qui va servir à écouter le déclenchement de l’évènement, et une partie gestionnaire en soi qui va être le code à exécuter dès que l’évènement se produit.
Aujourd’hui, en JavaScript, il existe trois grandes façons d’implémenter un gestionnaire d’évènements :
- On peut utiliser des attributs HTML de type évènement (non recommandé) ;
- On peut utiliser des propriétés JavaScript liées aux évènements ;
- On peut utiliser la méthode addEventListener() (recommandé).
Utiliser la méthode addEventListener() pour gérer un évènement
Cette dernière façon de gérer les évènements est la manière recommandée aujourd’hui car c’est la plus flexible et la plus performante.
La méthode addEventListener() est une méthode de l’interface EventTarget qu’on va souvent utiliser avec des objets Element car je vous rappelle que l’interface Element hérite de l’interface Node qui hérite elle-même de EventTarget.
Supprimer un gestionnaire d’évènements avec removeEventListener()
La méthode removeEventListener() de l’interface EventTarget va nous permettre de supprimer un gestionnaire d’évènement déclaré avec addEventListener().
Prévenir le comportement de base d’un évènement
Nous allons également pouvoir faire en sorte que l’action par défaut d’un évènement ne soit pas prise en compte par le navigateur. Pour faire cela, nous allons utiliser la méthode preventDefault() de l’interface Event.
