Stopper la propagation d’un évènement
Pour stopper la propagation d’un évènement, on va pouvoir utiliser la méthode stopPropagation() de l’interface Event. Cette méthode va stopper la propagation d’un évènement après qu’un gestionnaire d’évènement (gérant l’évènement en question) ait été atteint.
Cela signifie que si la phase de bouillonnement est choisie, le gestionnaire le plus proche de l’élément cible de l’évènement sera exécuté et les gestionnaires de ce même évènement attachés aux éléments parents seront ignorés.
Dans le cas où c’est la phase de capture qui est choisie, le gestionnaire pour cet évènement le plus lointain de l’élément cible de l’évènement sera exécuté et les autres seront ignorés.
Notez que si plusieurs gestionnaires d’un même évènement sont attachés à un même élément (et si cet élément est le premier atteint), ils seront exécutés à la suite.
Si on ne souhaite véritablement exécuter qu’un seul gestionnaire d’un évènement et ignorer tous les autres, on utilisera plutôt la méthode stopImmediatePropagation() de cette même interface.
Dans le cas où on utilise stopImmediatePropagation(), seul le premier gestionnaire de l’évènement attaché au premier élément atteint sera exécuté.
Stopper la propagation d’un évènement va pouvoir s’avérer très pratique dans le cas où nous avons plusieurs gestionnaires d’évènements pour le même évènement attachés à différents éléments dans la page et où on souhaite n’exécuter que le gestionnaire le plus proche de l’élément cible de l’évènement.
See the Pen
Cours JavaScript 8.8.1 by Pierre (@pierregiraud)
on CodePen.
Dans cet exemple, on attache deux gestionnaires d’évènement click au premier div et au premier paragraphe dans ce div de notre document. Par défaut, ces gestionnaires vont se déclencher durant la phase de bouillonnement.
Cela signifie qu’en cas de clic sur le paragraphe, le gestionnaire du paragraphe va se déclencher avant celui du div.
Ici, la fonction passée au gestionnaire du paragraphe utilise la méthode stopPropagation() ce qui implique que l’évènement click cessera de se propager après l’exécution de celle-ci. Le gestionnaire d’évènement du div n’enregistrera donc pas d’évènement et ne sera pas déclenché.
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.
Cela va notamment s’avérer très intéressant pour prévenir l’envoi d’un formulaire mal rempli.
En effet, lorsqu’un utilisateur souhaite envoyer un formulaire, il clique sur un bouton d’envoi. L’action associée par défaut à ce clic est l’envoi du formulaire. La méthode preventDefault() va nous permettre de neutraliser cette action par défaut (l’envoi du formulaire). On va vouloir faire ça dans le cas où on s’aperçoit que l’utilisateur a mal rempli le formulaire par exemple.
See the Pen
Cours JavaScript 8.8.2 by Pierre (@pierregiraud)
on CodePen.
Dans l’exemple ci-dessus, on attache un gestionnaire d’évènement click au bouton d’envoi du formulaire. L’idée va ici être d’empêcher l’action par défaut liée au clic sur ce bouton qui est l’envoi du formulaire si les données envoyées ne respectent pas la forme attendue.
Ici, nous ne créons pas la condition associée qui teste les données envoyée (ni la page de traitement des données formulaire.php d’ailleurs) car ce n’est pas le sujet de la leçon (nous verrons plus tard comment interagir avec les formulaires HTML en JavaScript). Il faut donc les imaginer.
