Bouillon d'événements JS

**pigpen** · 16/01/2014, 18h42

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 ?

**NoSmoking** · 16/01/2014, 20h16

Bonjour,

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

tout à fait, mais ce n'est pas moi

Présentation des évènements du DOM

L'objectif de cet article, relativement exhaustif, est de permettre de comprendre comment manipuler les évènements DOM en Javascript.

Invité · 17/01/2014, 15h42

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

**Watilin** · 17/01/2014, 17h41

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.

Invité · 17/01/2014, 18h53

le bouillonnement c'est quand le processeur chauffe trop

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 18/01/2014, 08h10

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!

**danielhagnoul** · 18/01/2014, 10h38

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".

**SylvainPV** · 19/01/2014, 20h30

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 :

**Watilin** · 19/01/2014, 20h40

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.

**SylvainPV** · 19/01/2014, 22h06

Envoyé par Watilin

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

On peut remercier jQuery pour ça aussi

**danielhagnoul** · 19/01/2014, 23h46

Celui qui en parle le mieux c'est : http://www.w3.org/TR/DOM-Level-3-Eve...t-architecture

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 :

La phase de capture
La phase de ciblage
La phase de bouillonnement

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.

**burndev** · 20/01/2014, 09h05

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é.

**pigpen** · 20/01/2014, 17h14

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 !

Bouillon d'événements JS

JavaScript

Discussions similaires

Partager

Partager