Empêcher un évènement de se propager et annuler son comportement par défaut en JavaScript

Dans la leçon précédente, nous avons étudié et compris comment les évènements se propageaient. Dans cette nouvelle leçon, nous allons apprendre à stopper la propagation d’un évènement ou à faire en sorte qu’un évènement ne soit pas du tout pris en compte et voir dans quelle situation cela peut s’avérer utile.

 

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.

Code support HTML pour présentation de la méthode JavaScript stopPropagation

Présentation de la méthode JavaScript stopPropagation qui empêche à un évènement de se propager

Exemple d'utilisation de stopPropagation en JavaScript pour empêcher à un évènement de se propager dans l'arbre DOM

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.

Code support HTML pour présentation de la méthode JavaScript preventDefault

Présentation de la méthode JavaScript preventDefault qui annule le comportement par défaut d'un évènement

Exemple d'utilisation de preventDefault en JavaScript pour annuler le comportement par défaut d'un évènement

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.

Laisser un commentaire