Comprendre la Propagation des événements en JavaScript

Les événements sont une fonctionnalité JavaScript puissante. Comprendre comment un navigateur Web les élève contre des éléments est la clé pour maîtriser leur utilisation.

Les événements en JavaScript agissent comme des notifications indiquant qu’une interaction de l’utilisateur ou une autre action a eu lieu. Par exemple, lorsque vous cliquez sur un bouton de formulaire, votre navigateur génère un événement pour indiquer que cela s’est produit. Taper dans une boîte de recherche soulève également des événements et c’est ainsi que la suggestion automatique fonctionne souvent en ligne.

En JavaScript, les événements qui impliquent une interaction de l’utilisateur se déclenchent généralement contre des éléments spécifiques. Par exemple, cliquer sur un bouton déclenche un événement par rapport à ce bouton. Mais les événements se propagent également: ils se déclenchent contre d’autres éléments de la hiérarchie des documents.

Poursuivez votre lecture pour tout savoir sur la propagation des événements et les deux types distincts disponibles.

Qu’est-ce que la gestion des événements en JavaScript?

Vous pouvez utiliser du code JavaScript pour détecter et répondre aux événements déclenchés par une page Web. Vous pouvez le faire pour remplacer le comportement par défaut ou prendre des mesures lorsqu’aucune valeur par défaut n’existe. Un exemple courant est la validation de formulaire. La gestion des événements vous permet d’interrompre le processus normal de soumission du formulaire.

Considérons cet exemple: Cliquez sur Moi

Le code ci-dessus a un élément button avec un id nommé button. Il a un écouteur d’événement de clic qui affiche une alerte avec le message Hello World.

Qu’Est-Ce Que La Propagation D’Événements ?

La propagation des événements décrit l’ordre dans lequel les événements parcourent l’arborescence DOM lorsque le navigateur Web les déclenche.

Supposons qu’il existe une balise de formulaire dans une balise div et que les deux ont des écouteurs d’événements onclick. La propagation d’événements décrit comment un écouteur d’événements peut se déclencher après l’autre.

Il existe deux types de propagation:

Événement bouillonnant, par lequel les événements bouillonnent vers le haut, de l'enfant au parent.
Capture d'événements, par laquelle les événements se déplacent vers le bas, du parent à l'enfant.

Qu’est-ce que le bouillonnement d’événements en JavaScript?

Le bouillonnement d’événements signifie que la direction de propagation de l’événement sera de l’élément enfant à son élément parent.

Considérons l’exemple suivant. Il a trois éléments imbriqués: div, form et button. Chaque élément a un écouteur d’événement de clic. Le navigateur affiche une alerte avec un message lorsque vous cliquez sur chaque élément.

Par défaut, l’ordre dans lequel le navigateur Web affiche les alertes sera bouton, formulaire, puis div. Les événements bouillonnent d’enfant en parent.

Exemple de propagation d’événement
div formulaire

Bouton

Un navigateur Web affichant une boîte de dialogue qui lit

Qu’Est-Ce Que La Capture D’Événements ?

Avec la capture d’événements, l’ordre de propagation est le contraire du bouillonnement. Sinon, le concept est identique. La seule différence avec la capture est que les événements se produisent d’un parent à l’autre. Contrairement à l’exemple précédent, avec la capture d’événements, le navigateur affichera les alertes dans cet ordre: div, formulaire et bouton.

Pour capturer des événements, vous devez apporter une seule modification au code. Le deuxième paramètre de addEventListener() définit le type de propagation. Il est faux par défaut, pour représenter le bouillonnement. Pour activer la capture d’événements, vous devez définir le deuxième paramètre sur true.

div.addEventListener(« cliquez », () => {
alerte (« div »)
}, vrai);
forme.addEventListener(« cliquez », () => {
alerte (« formulaire »)
}, vrai);
bouton.addEventListener(« cliquez », () => {
alerte (« bouton »)
}, vrai);

Comment Pouvez-Vous Empêcher La Propagation Des Événements?

Vous pouvez arrêter la propagation des événements en utilisant la méthode stopPropagation(). La méthode addEventListener() accepte un nom d’événement et une fonction de gestionnaire. Le gestionnaire prend un objet événement comme paramètre. Cet objet contient toutes les informations sur l’événement.

Lorsque vous appelez la méthode stopPropagation(), l’événement cessera de se propager à partir de ce point. Par exemple, lorsque vous utilisez stopPropagation() sur l’élément de formulaire, les événements cesseront de bouillonner jusqu’à la div. Si vous cliquez sur le bouton, vous verrez des événements générés sur le bouton et le formulaire, mais pas sur la div.

forme.addEventListener(« cliquez », (e) => {
e. stopPropagation();
alerte (« formulaire »);
});

JavaScript A beaucoup de Puissance Sous le Capot

La gestion des événements de JavaScript est puissante, comparable à de nombreux langages d’interface complets. Lorsque vous développez des applications Web interactives, c’est un élément essentiel de votre boîte à outils. Mais il y a beaucoup d’autres sujets avancés à saisir. Pour les développeurs JavaScript professionnels, il y a beaucoup à apprendre !

Si vous voulez apprendre à coder JavaScript comme un pro, consultez notre guide des doublures intelligentes et préparez-vous à épater lors de votre prochaine interview.

%d blogueurs aiment cette page :