Bouillonnement d'événement ou capture d'événements en javascript
Cet article discutera de l'événement JavaScript et de la capture d'événements. De plus, les exemples liés à la bulle d'événements et à la capture d'événements seront démontrés dans cet article. Alors, commençons!
Événement bouillonnant en javascript
En JavaScript, l'événement bouillonnant est un événement qui bouillonne de la cible ou des éléments les plus intérieurs à ses parents, puis il suit une approche de bas à la tête et déplace le flux de contrôle des événements vers ses ancêtres. La bouillonnement des événements est considérée comme une méthode de flux d'événements par défaut dans tous les navigateurs modernes.
Exemple: événement bouillonnant en javascript
Dans l'exemple suivant, nous avons ajouté un titre avec la balise, un élément div avec l'ID «Parentelement» et son élément de bouton d'enfant imbriqué ayant l'ID «Childelement»:
Après avoir récupéré les éléments HTML créés en utilisant le "document.queySelector () " Méthode, nous ajouterons un auditeur d'événements à la fois à la div «Parentement» et son bouton imbriqué «Childelement». La fonction a passé dans le "AddeventListener ()" affichera la chaîne ajoutée dans le "console.enregistrer()" méthode:
Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:
Maintenant, nous cliquerons sur le "Enfant" bouton qui peut être vu dans la sortie suivante:
En cliquant sur le "Enfant" bouton, le passé "fonction()" dans la méthode AdveventListener () sera exécutée. Puis le "sur clic()" Méthode de la "Div" L'élément sera invoqué. Cela se produit à cause du "Événement bouillonnant":
Dans l'exemple ci-dessus, lorsque nous avons cliqué "Enfant" bouton, le "Cliquez sur" L'événement est passé du bouton avec ID «Childelement» et le contrôle du flux d'événements se déplace vers le "document" Dans l'ordre suivant:
Comment arrêter l'événement bouillonnant en javascript
En utilisant le "événement.stopPropagation () » Méthode, vous pouvez facilement empêcher l'événement de bouillonner dans votre programme JavaScript, et il arrête le voyage d'événement du bas en haut.
Exemple: arrêter l'événement bouillonnant en javascript
Dans l'exemple divisé ci-dessous, nous ajouterons le "événement.stopPropagation () » Méthode au "sur clic()" Événement du bouton créé avec ID «Childelement». À la suite de cela, l'interprète JavaScript ne passera pas l'événement à l'élément «document» le plus externe:
Cliquez sur le bouton en surligné n'imprimera que "Enfant cliqué" Et puis il empêche l'événement de bouillonner:
Capture d'événements en javascript
Le processus dans lequel un événement est capturé lorsque son flux de contrôle passe de l'élément supérieur à l'élément cible est connu sous le nom de capture d'événements. Bien que les navigateurs modernes n'aient pas la capacité d'activer la capture d'événements par défaut, vous pouvez effectuer cette opération via le code JavaScript.
Exemple: capture d'événements en javascript
Dans notre programme JavaScript, tout d'abord, nous ajouterons un titre et un "Div" élément ayant une pièce d'identité «Parentement» et son élément enfant avec «Childelement» identifiant:
Ensuite, nous invoquerons le "document.queySelector () " Méthode pour obtenir l'élément parent et enfant:
Ce qui suit "Enfant" Le bouton invoque d'abord l'événement ajouté à l'élément parent. Après cela, il exécutera l'événement attaché à la cible:
Dans l'exemple ci-dessus, lorsque nous avons cliqué "Enfant" bouton, le "Cliquez sur" L'événement est passé de l'élément parent qui est «document», à l'objectif de l'événement spécifié «Childelement» bouton:
Comment arrêter la capture des événements en javascript
Pour arrêter la capture d'événements, vous pouvez utiliser le "événement.stopPropagation () » méthode. La différence entre l'arrêt de la capture d'événements et de la bouillonnement de l'événement est que, dans l'événement bouillonnant, nous avons attaché l'événement.Méthode stoppropagation () »avec l'événement lié à l'élément enfant, tandis que, dans la capture des événements, l'événement.La méthode stoppropagation () est ajoutée dans l'événement parent.
Exécutez l'exemple ci-dessous pour savoir comment arrêter la capture d'événements en utilisant le code JavaScript:
La sortie donnée signifie que la capture des événements est arrêtée après avoir exécuté l'événement associé à l'élément parent:
Voici la vue complète du flux de l'événement avec les phases de capture d'événements et de bouillonnement de l'événement:
Conclusion
En JavaScript, les bouillages d'événements et la capture d'événements sont les concepts les plus importants en ce qui concerne la propagation des événements. Dans HTML DOM, la capture d'événements fait référence à la propagation des événements des éléments d'ancêtre à leur enfant. En bouillonnant, le flux de contrôle des événements passe des éléments enfants aux ancêtres. Cet article a discuté de l'événement JavaScript et de la capture d'événements. De plus, les exemples liés au bouillonnement d'événements et à la capture d'événements sont également démontrés dans cet article.