Événement bouillonnant et capture d'événement

Découvrez comment le bouillonnement d'événements et la capture d'événements fonctionnent en JavaScript

Le bullage et la capture sont les 2 modèles que les événements DOM utilisent pour se propager.

Supposons que votre structure DOM soit

<div id="container">
  <button>Click me</button>
</div>

Vous souhaitez suivre le moment où les utilisateurs cliquent sur lebutton, et vous avez 2 écouteurs d'événements, un sur le bouton et un sur#container.

N'oubliez pas qu'un clic sur un élément enfant se propagera toujours à ses parents, sauf si vous arrêtez la propagation (voir plus loin).

Ces écouteurs d'événements seront appelés dans l'ordre, et cet ordre est déterminé par le modèle de création de bulles / de capture d'événements utilisé.

Bouillonnantsignifie que l'événement se propage de l'élément sur lequel on a cliqué (l'enfant) jusqu'à toute son arborescence parent, en commençant par la plus proche.

Dans notre exemple, le gestionnaire surbuttonva tirer avant le#containergestionnaire.

Capturerest le contraire: les gestionnaires d'événements externes sont déclenchés avant le gestionnaire plus spécifique, celui surbutton.

Par défaut, tous les événements bulle.

Vous pouvez choisir d'adopter la capture d'événements en appliquant un troisième argument àaddEventListener, en le réglant surtrue:

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

Notez quetout d'abord, tous les gestionnaires d'événements de capture sont exécutés.

Ensuite, tous les gestionnaires d'événements bouillonnants.

L'ordre suit ce principe: le DOM parcourt tous les éléments à partir de l'objet Window, et va chercher l'élément sur lequel on a cliqué. Ce faisant, il appelle tout gestionnaire d'événements associé à l'événement (phase de capture).

Une fois qu'il atteint la cible, il répète ensuite le voyage jusqu'à l'arbre des parents jusqu'à l'objet Window, en appelant à nouveau les gestionnaires d'événements (phase de bouillonnement)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: