Le bouillonnement d'événements et la capture d'événements en Javascript expliqués : comment les utiliser ?
Publié: 2020-03-26Table des matières
introduction
Deux terminologies très courantes utilisées pour le flux d'événements en JavaScript sont Event Bubbling et Event Capturing .
Ce sont deux manières importantes de propager un événement dans l'API HTML DOM lorsque les deux éléments enregistrent un handle pour un événement et que l'événement se produit dans un élément imbriqué dans un autre élément. L'ordre dans lequel un événement est reçu par les éléments est déterminé par le mode de propagation de l'événement. Lisez la suite pour connaître l'utilisation du bouillonnement d'événements et de la capture d'événements en JavaScript et pourquoi ils sont nécessaires au développement de pages Web.
Points clés à retenir
- Expliquer les termes événement, flux d'événements, gestionnaires d'événements et écouteurs d'événements
- Bullage d'événements et capture d'événements en JavaScript
- Utilité du bouillonnement d'événements et de la capture d'événements en JavaScript
Événements et flux d'événements
L'interaction des pages Web HTML avec JavaScript est médiatisée par des événements qui se produisent lorsque la page est manipulée par l'utilisateur ou le navigateur. Le chargement d'une page, l'utilisateur cliquant sur un bouton, fermant une fenêtre, sont autant d'exemples d'événements.
L'ordre dans lequel les événements sont reçus sur la page Web est appelé flux d'événements. Le processus de flux d'événements se déroule en 3 étapes - capture d'événement (interception de l'événement), ciblage d'événement (la cible reçoit l'événement) et propagation d'événement (réponse à l'événement).
Gestionnaires d'événements et écouteurs d'événements en JavaScript
Le gestionnaire d'événements est un code JavaScript qui est écrit à l'intérieur des balises HTML au lieu des balises <script>. Les gestionnaires d'événements exécutent JavaScript lorsqu'un événement se produit, comme appuyer sur un bouton. La syntaxe de base est : name_of_handler=”Code JavaScript ici”
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Google</a>
Une procédure qui attend l'occurrence d'un événement est un Event Listener. JavaScript a une fonction intégrée, addEventListener(), qui reçoit l'événement à écouter et appelle un deuxième argument lorsque ledit événement est déclenché. La syntaxe est : element.addEventListener(event, listener);
Bullage d'événements en JavaScript
Event Bubbling est une terminologie courante rencontrée lors du développement d'une page Web ou d'une application Web à l'aide de JavaScript. Le bouillonnement d'événements est une étape du processus de flux d'événements lorsque l'événement commence à l'élément le plus spécifique ou au nœud le plus profondément imbriqué dans le DOM et remonte ensuite vers le nœud le moins spécifique, c'est-à-dire le document.
La source
<!DOCTYPE HTML>
<html>
<tête>
<titre>……</titre>
</tête>
<corps>
<div id="demo"> Appuyez ici.</div>
</body>
</html>
En cliquant sur l'élément <div>, l'événement 'click' se produit dans l'ordre suivant :
- <div>
- <corps>
- <html>
- Document
L'événement 'click' déclenche l'élément <div>. Chaque nœud est ensuite déclenché le long de l'arborescence DOM, vers le haut, jusqu'à ce que le document objet soit atteint.
Lire : Idées et sujets de projet Full Stack
Capture d'événements en JavaScript
La capture d'événements est un modèle alternatif de flux d'événements qui a été introduit pour la première fois par le navigateur Netscape. Comme indiqué par ce modèle, un événement est reçu en premier par le nœud le moins spécifique et le nœud le plus spécifique ou l'élément le plus profondément imbriqué reçoit l'événement en dernier. Dans ce modèle, un événement est intercepté avant qu'il n'atteigne la cible réelle. Cependant, contrairement à Event Bubbling, les navigateurs modernes ne prennent pas en charge ce modèle et, par conséquent, Event Capturing ne peut être utilisé que dans des circonstances particulières.
La source
En se référant à l'exemple indiqué dans la section précédente, cliquer sur l'élément <div> déclenche l'événement 'click' dans l'ordre suivant :
- Document
- <corps>
- <html>
- <div>
Que se passe-t-il dans la phase de capture d'événement ?
Dans la phase de capture d'événement, les écouteurs du capteur dont la valeur est enregistrée comme "vrai", sont appelés. Il s'écrit de la manière suivante :
el.addEventListener('Clic', écouteur, vrai)
Ici, un événement est capturé car la valeur de l'écouteur est enregistrée comme "true". S'il n'y a pas de valeur, la valeur par défaut est "false" avec pour résultat que l'événement n'est pas capturé. Par conséquent, dans cette phase, seuls les événements avec une valeur réelle sont appelés et capturés. Dans la phase cible suivante, tous les écouteurs enregistrés sont appelés, que leur valeur soit enregistrée comme vraie ou fausse.
Flux d'événements DOM en JavaScript
Le DOM niveau 2 spécifie trois étapes au modèle de flux d'événements :
- Phase de capture d'événement
- A la cible
- Phase de bouillonnement d'événement
La source
S'il existe une opportunité d'intercepter l'événement, la capture d'événement se produit en premier. Ceci est suivi par la cible réelle qui reçoit l'événement. Finalement, lors de la phase de bouillonnement d'événement, la réponse finale à l'événement a lieu. En se référant à l'exemple indiqué dans la section précédente, cliquer sur l'élément <div> déclenche l'événement 'click' dans l'ordre illustré dans le diagramme ci-dessus.
Lire : Salaire d'un développeur Full Stack en Inde
Utilité du bouillonnement d'événements et de la capture d'événements en JavaScript
Dans la phase de bouillonnement d'événements, seuls les événements ayant la valeur de drapeau "faux" (non-capteurs) sont appelés. Le bouillonnement d'événements et la capture d'événements sont des aspects importants de DOM.
el.addEventListener('Click', listener, false) // l'écouteur ne capture pas
el.addEventListener('Click', listener) // l'écouteur ne capture pas
Le code ci-dessus illustre le fonctionnement des phases de bouillonnement et de capture. Chaque événement n'atteint pas la cible. Certains événements ne sont pas bouillonnés et s'arrêtent après la phase cible. L'événement bouillonnant n'est pas applicable à tous les types d'événements et l'écouteur doit avoir la propriété booléenne ".bubble" de l'objet de l'événement en plus de posséder d'autres propriétés telles que - e.target (pour référencer la cible de l'événement) et e.eventPhase (les auditeurs actuels s'inscrivent sur ce mode).
Conclusion
Le flux d'événements en JavaScript comporte trois phases importantes : la phase de capture d'événements, la phase cible et la phase de diffusion d'événements. La capture d'événements est la première à se produire, où les événements sont interceptés si nécessaire. Ceci est suivi par l'événement atteignant la cible réelle et la phase finale est bouillonnante, lorsque la réponse ultime à un événement a lieu. Ainsi, on peut conclure de manière appropriée que le bouillonnement d'événements et la capture d'événements en JavaScript sont les fondements dont dépendent le gestionnaire d'événements et la délégation d'événements.
Si vous souhaitez en savoir plus sur la pile complète, consultez le diplôme PG upGrad & IIIT-B en développement de logiciels Full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et missions, IIIT- B Statut d'ancien, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.