Bulle d’événements


Introduction

Nous avons parlé des événements et de la gestion des événements dans le post précédent. Nous pouvons attacher des gestionnaires aux événements. Ces handlers sont invoqués lorsque l’événement se produit.

Le bouillonnement d’événements en JavaScript signifie que lorsqu’un événement se produit sur un élément, son gestionnaire est invoqué, suivi de ses parents puis des ancêtres.

Exemple :

 onclick="alert('Click Event Happened')">
    

If you have click this paragraph in the browser, the onclick handler of the div will get invoked.

Le clic sur le paragraphe de l’exemple ci-dessus invoquera la onclick alerte de la div. L’événement a bubbled du paragraphe à l’élément div.

Cela se produirait même si nous avions un nombre n d’éléments imbriqués avec des gestionnaires d’événements sur eux.

Exemple :

 onclick="alert('Span Clicked')">
     onclick="alert('Div Clicked')">
         onclick="alert('Paragraph Clicked')">Click Me.

Si nous cliquons sur le paragraphe de l’exemple ci-dessus, cela provoquera trois alertes dans la fenêtre du navigateur !

Trouver l’élément original de l’événement

Lorsqu’un événement traverse plusieurs couches, il est difficile de savoir ce qui a provoqué la chaîne des événements. JavaScript facilite la tâche.

Dans l’exemple ci-dessus, si nous cliquions sur le paragraphe, celui-ci serait alors appelé target ou event.target. Quel que soit le nombre de couches d’un événement, le event.target ne change jamais. Cela nous indique l’objet original où l’événement s’est produit.

Disons maintenant que l’événement a fait boule de neige et que nous voulons connaître l’élément actuel de la chaîne de bulles de l’événement. C’est également facile. Le mot-clé this ou event.currentTarget vous fournira l’élément de traitement actuel.

Comment éviter que les événements ne dégénèrent ?

Les événements qui font boule de neige iront jusqu’à élément. Certains vont à document, et certains d’entre eux arrivent à la window objet.

Si nous ne voulons pas que les gestionnaires des éléments parents soient invoqués, utilisez event.stopPropagation().

Exemple :

 onclick="alert('This will not alert')">
   onclick="event.stopPropagation()">Click me