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.
Version imprimable
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.
Dans l'exemple ci dessous, le click sur child déclenche la click du parent ..
http://fiddle.jshell.net/dkhbmmnf/
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?
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.
Ok merci pour la réponse.
Les fonctions Event.preventDefault() et Event.stopPropagation() sont donc ici pour stopper ce comportement alors?
non pas exactement ...
Event.stopPropagation()
et cancelBubble()
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.
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" ?
:arrow: Présentation des événements du DOM.
Ca répondra à toutes tes questions ! :)
Ok merci.