Bulles d'événements et capture d'événements en JavaScript: tout ce que vous devez savoir

Le bulles d'événements et la capture d'événements sont les termes les plus utilisés en JavaScript au moment du flux d'événements. Ce sont les deux méthodes de propagation d'événements dans l'API HTML DOM. Cet article sur la création de bulles et la capture d'événements en JavaScript décrit en détail pourquoi nous en avons besoin dans dans l'ordre suivant:

• • • Qu'est-ce que l'Event Bubbling en JavaScript?
    • Qu'est-ce que la propagation d'événements?
    • Qu'est-ce que la capture d'événements?
    • Utilisation de la création de bulles et de la capture d'événements dans JavaScript
    • Procédure de travail

Qu'est-ce que l'Event Bubbling en JavaScript?

Event Bubbling est le terme que les gens doivent rencontrer lors du développement d'une application Web ou d'une page Web en utilisant . Fondamentalement, l'Event Bubbling est une technique dans laquelle les gestionnaires d'événements sont appelés lorsqu'un élément est imbriqué dans un autre élément et doit appartenir au même événement. C'est similaire à l'encapsulation.

La création de bulles d'événement n'est qu'une petite partie de la gestion des événements en JavaScript. Pour mieux le comprendre, nous devons connaître la propagation des événements et la manière dont elle prend en charge le bulles d'événements.

Qu'est-ce que la propagation d'événements?

La propagation d'événement peut être comparée au terme parent avec le bullage d'événement et la capture comme son enfant.Il est représenté comme suit:

espaces de noms en C ++

Si vous cliquez sur une image, non seulement cela générerait un événement de clic, mais cela irait au parent «a» et au grand-père «li». De cette manière, la propagation de la fonction a lieu. Ici, l'image est considérée comme l'enfant et c'est la cible de l'événement où le clic est généré. L'image avec ses ancêtres forme ensemble la branche dans une terminologie arborescente. La branche est importante car nous apprenons à connaître le chemin le long duquel l'événement se propage.

Chacun des écouteurs est appelé avec un objet événement respectivement qui rassemble des informations sur l'événement. Cette propagation est très importante car nous apprenons à connaître le processus d'appel de tous les auditeurs pour l'événement donné. D'après l'image ci-dessus, nous pouvons remarquer que la détermination de la branche est statique. Toutes les modifications d'arborescence survenant pendant l'événement sont ignorées. Ici, la propagation est bidirectionnelle, c'est-à-dire qu'elle va de la fenêtre à la cible de l'événement et revient. Ici, la propagation est largement classée en trois types principaux. Ce sont:

1. La phase de capture: Passer de la fenêtre à la phase cible de l'événement.
2. La phase cible: C'est la phase cible.
3. La phase de bulle: Du parent cible de l'événement à la fenêtre.

Qu'est-ce que la capture d'événements?

Dans cette phase, les auditeurs captureurs sont appelés dont la valeur a été enregistrée comme «true». Il est écrit comme suit:

el.addEventListener ('clic', écouteur, vrai)

Ici, la valeur de l'écouteur a été enregistrée comme étant «true», donc cet événement est capturé. S'il n'y avait aucune valeur, la valeur par défaut était false et l'événement ne serait pas capturé. Donc, dans cette phase, cet événement dont la valeur est true ne trouve son chemin qu'à partir de la fenêtre et est appelé et capturé.

Ensuite, dans la phase cible d'événement, tous les écouteurs enregistrés sont appelés quel que soit l'état de leur indicateur qui est vrai ou faux.

quelle est la différence entre git et github

Utilisation de la création de bulles et de la capture d'événements dans JavaScript

Dans la phase de bulles, seul le non-capturer est appelé, c'est-à-dire les événements dont la valeur d'indicateur est «false». Le bullage d'événements et la capture d'événements sont très utiles et importants dans la terminologie DOM (Document Object Model).

el.addEventListener ('click', listener, false) // l'auditeur ne capture pas el.addEventListener ('click', listener) // l'auditeur ne capture pas

Le morceau de code ci-dessus montre le fonctionnement de la phase de bouillonnement et de capture. Tous les événements n'atteignent pas la cible de l'événement. Certains d'entre eux ne sont pas bouillonnants. Leur voyage s'arrête après la phase cible. Le flux de phase à trois événements est illustré dans le diagramme suivant:

L'événement bouillonnant ne fonctionne pas dans tous les types d'événements, cependant, l'auditeur doit posséder '.bulle ”Propriété booléenne de l'objet événement. Certaines des autres propriétés comprennent:

1. e.target: qui fait référence à la cible de l'événement.
2. e.currentTarget: c'est le mode sur lequel les auditeurs actuels sont enregistrés. Ici, la valeur est référencée en utilisant cette mot-clé.
3. e.eventPhase: C'est un entier qui fait référence à trois autres mots-clés tels que Capture_phase, Bubbling_phase, AT_Target phase.

Procédure de travail

Examinons de plus près l'illustration ci-dessus. Cliquons sur l'élément «buttonOne» et immédiatement un événement va être déclenché. Normalement, un événement commence son voyage à partir de la racine qui est l'élément le plus haut de l'arbre. Ensuite, il suit l'arborescence l'événement cible qui est «buttonOne». Voici comment il se déplace:

Comme le montre la figure, l'événement se fraye un chemin à travers les terminologies DOM pour atteindre l'événement cible à la fin. Maintenant, une fois que l'événement atteint sa cible, il ne se termine pas. Cela continue encore et encore dans les terminologies DOM, comme illustré dans l'image ci-dessous.

Tout comme avant, chaque élément le long du chemin de l'événement au fur et à mesure de son évolution est notifié de son existence. Au fur et à mesure que cela se passe, vous devez vous demander si nous pouvons arrêter le processus ou non. Eh bien, la réponse à la question est Oui, nous pouvons arrêter la propagation de l'événement. Cela se fait en invoquant le 'StopPropagation' méthode de l'objet événement.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' clic ', écouteur (' b1 ')) window.addEventListener (' clic ', écouteur (' b2 '))

En appliquant le mot-clé, nous pouvons arrêter la propagation. Cela fonctionne comme ceci, lorsque nous appliquons le mot-clé ' stopPropagation » alors tous les événements sous les événements principaux ne sont pas appelés et par conséquent, ils ne seraient pas appelés comme il est mentionné dans le morceau de code ci-dessus. Il existe un autre mot clé appelé ' stopImmediatePropagation ». Comme son nom l'indique, il arrête immédiatement les démarches des frères et sœurs.

instance d'une classe java

Avec cela, nous sommes arrivés à la fin de notre article. J'espère que vous avez compris ce que sont les bulles d'événements et la capture d'événements en JavaScript.

Maintenant que vous connaissez les bulles d'événement et la capture d'événements en JavaScript, consultez le par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «Événementiel et capture d'événement en JavaScript» et nous vous répondrons.