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 changer 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.

Par exemple, on va pouvoir détecter le clic d’un utilisateur sur un bouton d’un document et afficher une boite de dialogue ou un texte suite à ce clic. On parlera donc « d’évènement clic ».

Il existe de nombreux évènements répertoriés en JavaScript (plus d’une centaine). Les évènements qui vont nous intéresser particulièrement sont les évènements liés au Web et donc au navigateur. Ces évènements peuvent être très différents les uns des autres :

  • Le chargement du document est un évènement ;
  • Un clic sur un bouton effectué par un utilisateur est un évènement ;
  • Le survol d’un élément par la souris d’un utilisateur est un évènement ;
  • Etc.

Nous n’allons bien évidemment pas passer en revue chaque évènement mais allons tout de même nous arrêter sur les plus courants.

 

Définir des gestionnaires d’évènements

Pour écouter et répondre à un évènement, nous allons définir ce qu’on appelle 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é.

Nous préférerons largement cette dernière méthode pour des raisons de performance et de fonctionnalités. Dans ce cours, nous allons cependant étudier chacune d’entre elles pour que vous puissiez les identifier et les comprendre.

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

L’utilisation d’attributs HTML pour prendre en charge un évènement est la méthode la plus ancienne à notre disposition.

Cette façon de faire ne devrait plus être utilisée aujourd’hui. Cependant, de nombreux sites utilisent encore ce type de syntaxe ce qui nous force à l’étudier ici.

L’idée va être ici d’insérer un attribut HTML lié à l’évènement qu’on souhaite gérer directement dans la balise ouvrante d’un élément à partir duquel on va pouvoir détecter le déclenchement de cet évènement.

Ces attributs HTML de « type évènement » possèdent souvent le nom de l’évènement qu’ils doivent écouter et gérer précédé par « on » comme par exemple :

  • L’attribut onclick pour l’évènement « clic sur un élément » ;
  • L’attribut onmouseover pour l’évènement « passage de la souris sur un élément » ;
  • L’attribut onmouseout pour l’évènement « sortie de la souris d’élément » ;
  • Etc.

Nous allons passer en valeur de ces attributs le code JavaScript qu’on souhaite exécuter (généralement une fonction) suite au déclenchement de l’évènement en question. Dès que l’évènement va être détecté, le code présent dans l’attribut va être exécuté.

Utilisation des attributs HTML pour gérer des évènements en JavaScript

See the Pen
Cours JavaScript 8.6.1
by Pierre (@pierregiraud)
on CodePen.

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

Chaque évènement est représenté en JavaScript un objet basé sur l’interface Event.

L’interface Event est l’interface de base commune pour tout évènement qui se produit dans le DOM. Certains types d’évènements sont ensuite définis plus précisément dans des interfaces qui héritent de Event.

Les gestionnaires d’évènements liés à ces évènements sont décrits dans le mixin GlobalEventHandlers qu’implémentent notamment les interfaces HTMLElement et Document.

Ces gestionnaires d’évènements sont des propriétés qui sont de la forme « on » + nom de l’évènement géré, c’est-à-dire qui ont des noms similaires aux attributs HTML vus précédemment.

On va à nouveau passer le code à exécuter (généralement sous forme de fonction anonyme) en cas de déclenchement de l’évènement en valeur de la propriété relative à l’évènement et allons généralement utiliser ces propriétés à partir d’objets Element.

Code HTML support pour présentation des propriétés de gestion d'évènements JavaScript

On utilise les propriétés JavaScript pour gérer les évènements

See the Pen
Cours JavaScript 8.6.2
by Pierre (@pierregiraud)
on CodePen.

Notez que cette façon de faire est moins efficace et performante que la suivante car chaque objet ne va pouvoir posséder qu’une propriété gestionnaire d’évènements pour un même type d’évènements ce qui signifie qu’on ne va pas pouvoir réagir plusieurs fois de façons différentes à un même évènement à partir d’un même élément.

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.

On va passer deux arguments à cette méthode : le nom d’un évènement qu’on souhaite prendre en charge ainsi que le code à exécuter (qui prendra souvent la forme d’une fonction) en cas de déclenchement de cet évènement.

Notez qu’on va par ailleurs pouvoir utiliser la méthode addEventListener() pour réagir plusieurs fois et de façon différente à un même évènement ou pour réagir à différents évènements à partir de différents ou d’un même objet Element.

On utilise la méthode JavaScript addEventListener pour créer des gestionnaires d'évènements

See the Pen
Cours JavaScript 8.6.3
by Pierre (@pierregiraud)
on CodePen.

 

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().

Pour cela, il va suffire de passer en argument le type d’évènement ainsi que le nom de la fonction passée en argument de addEventListener().

On utilise la méthode removeEventListener pour supprimer un gestionnaire d'évènements en JavaScript

See the Pen
Cours JavaScript 8.6.4
by Pierre (@pierregiraud)
on CodePen.

La méthode removeEventListener() va s’avérer utile lorsqu’on voudra retirer un gestionnaire d’évènement selon certains cas comme par exemple dans la situation où un autre évènement s’est déjà déclenché.

Laisser un commentaire