Bouillon d'événements JS

Version imprimable

16/01/2014, 18h42
pigpen

Bouillon d'événements JS

Bonjour à tous,

Petite question, j'ai entendu aujourd'hui l'expression "bouillon d'événements javascript".

Quelqu'un pourrait m'expliquer le sens de cette expression ?
16/01/2014, 20h16
NoSmoking

Bonjour,

Citation:

Quelqu'un pourrait m'expliquer le sens de cette expression ?

tout à fait, mais ce n'est pas moi :mrgreen:

:fleche: Présentation des évènements du DOM

Citation:

L'objectif de cet article, relativement exhaustif, est de permettre de comprendre comment manipuler les évènements DOM en Javascript.
17/01/2014, 15h42
Invité

Ça ressemble à du jargon pseudo quelque chose d'un type qui veut vendre ce quelque chose.
17/01/2014, 17h41
Watilin

Citation:

Envoyé par chanyslas

Ça ressemble à du jargon pseudo quelque chose d'un type qui veut vendre ce quelque chose.

Oui c'est du jargon, non ce n'est pas commercial. Le bouillonnement d'évènements est un terme très connu, et si tu penses ce que tu as dit c'est qu'apparemment tu ne le connais pas. Si tu avais su, tu aurais certainement pu apporter une réponse plus constructive.

le bouillonnement c'est quand le processeur chauffe trop :mouarf:

plus serieusement c'est vrai que le mot est flou j'ai l'impression que c'est une traduction simpliste du mot anglais bubling personnelement je dirait plutot debordement sa arrive quand des elements son imbriqué et qu'il possedents le meme evenement.

comme je suis plus exemple concret que grosse explication voici un exemple qui met en avant cette phase.

il s'agit de div imbriqué et on s'appercois que quand on clic dans le div le plus haut sa ce repercute sur les autres (bouillonnement) et que pour eviter le bouillonnement on utilise stopPropagation (div vert)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <script type="text/javascript"> function fct4(evt){ evt.stopPropagation(); alert(evt.currentTarget.id); } function fct3(evt){ alert(evt.currentTarget.id); } function fct2(evt){ alert(evt.currentTarget.id); } function fct1(evt){ alert(evt.currentTarget.id); } </script> </head> <body> <div onclick='fct1(event)'id='div_gris' style='display:inline-block;height:300px;width:300px;background-color:gray'> <div onclick='fct2(event)' id='div_bleu' style='margin:auto;margin-top:30px;height:200px;width:200px;background-color:blue'> <div onclick='fct3(event)'id='div_rouge' style='margin:auto;height:80px;width:80px;background-color:red'></div> <br> <div onclick='fct4(event)'id='div_vert' style='margin:auto;margin-top:5px;height:80px;width:80px;background-color:green'></div> </div> </div> </html>

18/01/2014, 08h10
NoSmoking

Citation:

Envoyé par chanyslas

Ça ressemble à du jargon pseudo quelque chose d'un type qui veut vendre ce quelque chose.

ce passage Les notions de flux et de propagation d'un événement reste quand même clair me semble t-il!
18/01/2014, 10h38
danielhagnoul

Citation:

Envoyé par mekal

l[...]c'est vrai que le mot est flou j'ai l'impression que c'est une traduction simpliste du mot anglais bubling personnelement je dirait plutot debordement sa arrive quand des elements son imbriqué et qu'il possedents le meme evenement.

Pour moi, la bonne traduction de "event bubbling" c'est simplement "la propagation d'événements".
19/01/2014, 20h30
SylvainPV

Le bouillonnement n'est qu'une des phases de la propagation d'un évènement, la phase où l'évènement remonte le DOM jusqu'au noeud racine. L'article de hornetbzz explique ça très bien.

Le mot peut sembler comique, mais ça donne une bonne image du sens de propagation. Moi pour m'en rappeler, je m'imagine le DOM d'une page en 3 dimensions, où chaque élément fait un creux dans son élément parent. Puis un clic serait comme si on lâchait une balle du haut du DOM : elle touche l'élément le plus au fond avant de rebondir. On peut intercepter la balle au rebond pour ne pas qu'elle remonte trop haut.

Un peu comme la 3D view de firefox, mais avec des trous au lieu de bosses :
http://i.imgur.com/432i5Lz.png
19/01/2014, 20h40
Watilin

Pour ne pas confondre la phase de bouillonnement avec la phase de capture (qui sont les deux phases de propagation, n'est-ce pas Daniel ;)), moi je me rappelle que le 3e paramètre de addEventListener qu'on met toujours à false (souvent sans trop savoir pourquoi – d'ailleurs il est devenu optionnel et c'est tant mieux) s'appelle useCapture dans la doc du W3C.

Comme on met toujours useCapture = false, ça signifie qu'on n'utilise jamais la phase de capture. Autrement dit, c'est la phase de bouillonnement qu'on utilise tous les jours.
19/01/2014, 22h06
SylvainPV

Citation:

Envoyé par Watilin

Autrement dit, c'est la phase de bouillonnement qu'on utilise tous les jours.

On peut remercier jQuery pour ça aussi ;)
19/01/2014, 23h46
danielhagnoul
Celui qui en parle le mieux c'est : http://www.w3.org/TR/DOM-Level-3-Eve...t-architecture

http://danielhagnoul.developpez.com/.../EventFlow.png

Pour nous mettre en accord avec la norme DOM, nous devrions donc dire que la propagation d'événements se décompose en trois phases :
1. La phase de capture
2. La phase de ciblage
3. La phase de bouillonnement
Citation:
The capture phase: The event object must propagate through the target's ancestors from the defaultView to the target's parent. This phase is also known as the capturing phase. Event listeners registered for this phase must handle the event before it reaches its target.
The target phase: The event object must arrive at the event object's event target. This phase is also known as the at-target phase. Event listeners registered for this phase must handle the event once it has reached its target. If the event type indicates that the event must not bubble, the event object must halt after completion of this phase.
The bubble phase: The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView. This phase is also known as the bubbling phase. Event listeners registered for this phase must handle the event after it has reached its target.
20/01/2014, 09h05
burndev

Citation:

Envoyé par Watilin

Comme on met toujours useCapture = false, ça signifie qu'on n'utilise jamais la phase de capture. Autrement dit, c'est la phase de bouillonnement qu'on utilise tous les jours.

Ce paramètre permet de définir le sens de propagation des événements et ca change beaucoup de choses selon l'événement utilisé.
20/01/2014, 17h14
pigpen

Hello,

Merci à tous de vos réponses, j'avais déjà ma petite idée mais c'est bien plus clair pour moi désormais !

danielhagnoul, très bien ce schéma ! Un bout de code ou un dessin y'a que ca de vrai !