La gestion des événements en JavaScript (rappels)
Un événement correspond à une action qu’on va pouvoir intercepter et à laquelle on va pouvoir réagir. Un événement est un signal qui indique que “quelque chose vient de se passer”.
Ces actions vont généralement provenir soit du navigateur lui même, soit des utilisateurs. Les événements load et DOMContentLoaded par exemple qui se déclenchent lorsque la page complète est chargée ou lorsque le DOM de la page est chargée tandis que l’événement click se déclenche lorsqu’un utilisateur clique sur un élément de la page.
Au moment où une telle action se produit, on dit que l’événement associée à l’action est déclenché (“fired” en anglais). Nous allons alors pouvoir “écouter” ou “intercepter” l’événement et y répondre en indiquant quoi faire dans une fonction gestionnaire d’événements.
La gestion des événements est l’une des fonctionnalités majeures et incontournables du JavaScript puisque les événements vont ajouter du dynamisme à nos pages en nous permettant de répondre à certaines actions.
En JavaScript, on va pouvoir gérer des événements de trois manières différentes :
- En utilisant les attributs d’événements HTML ;
- En utilisant des gestionnaires inline de type “on-event” ;
- En utilisant la méthode
addEventListener().
Selon les situations, on utilisera plutôt une méthode ou une autre même si généralement il est plutôt conseillé d’utiliser addEventListener() qui nous permet de gérer les événements de façon efficace et qui nous offre de nombreuses fonctionnalités.
Nos gestionnaires d’événements vont être des fonctions de rappel, c’est-à-dire des fonctions (généralement anonymes) qui vont être appelées uniquement lorsque l’événement qu’elles gèrent va être déclenché.
La gestion des événements avec jQuery
jQuery va simplifier la gestion d’événements en nous fournissant une série de méthodes qu’on va pouvoir utiliser pour gérer nos événements.
Ces méthodes vont porter le nom de l’événement auquel elles réagissent comme click(), mouseenter(), keyup(), change(), etc. et sont en fait des notations raccourcies de la méthode jQuery on() qui va nous permettre de gérer plusieurs événements au sein d’une même fonction gestionnaire d’événements.
La fonction gestionnaire d’événements sera une fonction anonyme qu’on passera en argument de nos méthodes. Elle sera appelée lorsque l’événement (ou lorsque les événements) se produit(sent).
On va par exemple pouvoir gérer un événement click sur un paragraphe en changeant le texte de ce paragraphe lorsque l’événement se produit comme cela :
See the Pen
Cours jQuery 3.1.1 by Pierre (@pierregiraud)
on CodePen.
Notez que dans le cadre de la gestion d’événements, this fait référence à l’élément qui a initié l’événement, c’est-à-dire l’élément où l’événement a été déclenché.
Comme vous pouvez le voir, l’utilisation de la méthode jQuery on() fait beaucoup penser à celle de la méthode JavaScript addEventListener().
Notez par ailleurs que la méthode on() ne peut par défaut créer de gestionnaire d’événements que pour des éléments qui existent au moment où on met en place le gestionnaire. Si on crée un gestionnaire d’événements avec on() puis qu’on crée ensuite un élément, le gestionnaire d’événements ne s’appliquera donc pas à cet élément.
Propagation des événements et délégation (rappels)
Lorsqu’un événement est déclenché, il va traverser le DOM jusqu’à rencontrer un gestionnaire qui va le prendre en charge. On dit également que l’événement se “propage” dans le DOM.
Pour être tout à fait précis, les événement se propagent selon 3 phases distinctes :
- Une phase qu’on appelle phase de “capture” durant laquelle l’événement part de l’élément racine et va jusqu’à l’élément qui a déclenché l’événement ;
- Une phase “cible” correspondant au moment où l’événement atteint l’élément ;
- Une phase appelée phase de “bouillonnement” durant laquelle l’événement remonte le long du DOM jusqu’à la racine.
Dans la grande majorité des cas, les gestionnaires d’événements sont configurés pour gérer les événements lors de la phase de bouillonnement et la phase de capture est donc très souvent invisible pour nous.
Cette notion de propagation signifie qu’on ne va pas être obligé d’accrocher notre gestionnaire d’événement à l’élément déclencheur : on va également pouvoir choisir de l’attacher à un élément parent de cet élément. Comme l’événement se propage, il finira par arriver au parent et sera donc pris en charge à ce moment là.
Cette technique de délégation peut s’avérer très utile dans le cas où on a de nombreux éléments qui peuvent déclencher un même événement qui va être pris en charge de la même façon à chaque fois : plutôt que d’attacher le même gestionnaire d’événement à chaque élément, on pourra accrocher un unique gestionnaire à l’élément parent de ces éléments.
