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.
Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Concept propagation et bubbling event
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/
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
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.
Pas de question technique par MP !
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()
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
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" ?
Présentation des événements du DOM.
Ca répondra à toutes tes questions !
Ok merci.
Répondre avec citation
Partager