Concept propagation et bubbling event

**Ali Kent** · 16/12/2014, 13h11

Bonjour,

Il y a un concept javascript que je n'ai pas compris.

Qu'est ce que la propagation et le bubbling d'événement en javascript?

Merci d'avance pour vos réponses.

**SpaceFrog** · 16/12/2014, 13h21

Dans l'exemple ci dessous, le click sur child déclenche la click du parent ..

http://fiddle.jshell.net/dkhbmmnf/

**Ali Kent** · 16/12/2014, 13h48

C'est donc le fait qu'un évènement déclenché sur un élément déclenche ce même évènement sur les éléments parents. C'est bien ça?

**Bovino** · 16/12/2014, 14h02

Oui, c'est un peu ça.
En gros, il faut voir ta page Web comme un empilement de calques sur une feuille. Le calque le plus profond serait la balise <body> sur laquelle on vient empiler les différentes balises selon l'ordre dans lequel elles apparaissent dans le code.
Sauf que si par exemple tu prévois un événement sur une balise, mais qu'il y en a d'autres au-dessus, il faut que la balise puisse quand même réagir à l'événement. Donc quand l'événement est déclenché sur la balise la plus haute dans la pile, cet événement va ensuite être "transmis" à toutes les balises parentes et tous les événements prévus pourront être déclenchés.

**Ali Kent** · 16/12/2014, 14h15

Ok merci pour la réponse.
Les fonctions Event.preventDefault() et Event.stopPropagation() sont donc ici pour stopper ce comportement alors?

**SpaceFrog** · 16/12/2014, 14h28

non pas exactement ...

Event.stopPropagation()
et cancelBubble()

**Bovino** · 16/12/2014, 14h36

Event.stopPropagation() permet effectivement d'empêcher l'événement de se propager, en revanche, Event.preventDefault() sert à autre chose.
Certains éléments HTML ont un comportement spécifique suite à certaines actions et ce indépendamment de toute notion de JavaScript. Typiquement, cliquer sur un lien permet d'aller à l'URL ou à l'ancre indiquée dans l'attribut href. Le JavaScript associé à un événement (par exemple l'événement click pour un lien) s'exécutant avant cette action par défaut, Event.preventDefault() permet d'empêcher ce comportement par défaut.

**Ali Kent** · 16/12/2014, 15h25

Ah ok deux choses différentes en sommes.

Merci pour vos réponses.
Une dernière question : j'ai vu qu'il y avait un sens de propagation (en recherchant sur google) différent en fonction des navigateurs et de leur implémentation de javascript. Est ce que c'est "gênant" ?

**Bovino** · 16/12/2014, 15h58

Présentation des événements du DOM.
Ca répondra à toutes tes questions !

**Ali Kent** · 16/12/2014, 16h22

Ok merci.

Concept propagation et bubbling event

JavaScript

Discussions similaires

Partager

Partager