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é.
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 par 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
.
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
.
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()
.
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é.
petite erreur au premier paragraphe « ((on)) changer la taille »
Merci, c’est corrigé !