[réglé] Différence entre l'effet bubbling et capturing [Résolu]

chok371 · 19/12/2010, 19h59

Bonjour,

J'ai une question sur les événements, j'ai compris qu'un événement pouvait se propager du haut vers le bas ou inverse dans l'arbre du DOM, et qu'on pouvait aussi stopper cette propagation.

Mais en quoi c'est différent le sens dans lequel se propage l'événement ? ça change quoi dans une application ?

Je ne vois pas de différence, par exemple, dans la méthode addEventListener* : je ne comprends pas l'utilité du 3ème argument booléen qui définie la manière dont l'événement va se propager.

* rappel : http://www.quirksmode.org/js/events_advanced.html

Merci de m'éclairer.

franculo_caoulene · 19/12/2010, 23h31

Salut,

En fait, l'événement effectue un aller-retour. Il va de l'élément englobant vers la cible, puis fait le chemin inverse. Une illustration se trouve dans le brouillon de la spécification du DOM3.

Le troisième paramètre de addEventListener() indique si l'élément courant accepte ou non la capture d'événement (phase descendante).
Pour éviter le bouillonnement, il faut utiliser stopPropagation().Le bouillonnement cessera dès lors qu'il a rencontré stopPropagation() sur le chemin du retour.

L'importance tient de l'interaction que peut avoir un événement sur les éléments environnants. Par exemple, si on imagine trois zones concentriques qui changent de couleur à la suite d'un clique. Si tu ne préviens pas le bouillonnement au niveau de la plus petite zone, toutes les zones changeront de couleur en cliquant dessus.

En règle général, je pense qu'on laisse quasiment tous le paramètre useCapture d'addEventListener() à false et on ne s'occupe que du bouillonnement en utilisant stopPropagation(). C'est d'ailleurs la logique utilisée par jQuery.

Illustration :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>parcours d un événement</title>
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
  h1 {margin:0 0 20px 0;}
  h2 {margin:20px 0 0 0;}
  div {width:300px;height:200px;display:inline-block;vertical-align:middle;background:#333;}
  p {margin:20px;padding:10px;background:#666;text-align:center;}
  a {margin:10px;padding:10px;display:block;background:#999;}
  pre {margin:20px 0;background:#ccc;color:#333;font:0.8em Courier New;}
  .texte {margin:20px 0;padding:10px;background:#333;text-align:left;font-size:0.8em;}
  </style>
</head>
<body>
  <h1>Parcours d un événement</h1>
  <h2>Illustration</h2>
  <p class="texte">Cliquer sur la zone la plus claire.</p>
  <div id="dc">
    <p id="pc">
      <a id="c">Capture</a>
    </p>
  </div>
  <div id="db">
    <p id="pb">
      <a id="b">Bouillonnement</a>
    </p>
  </div>
  <h2>Code</h2>
  <pre>
 
    // illustration de la capture
  // on empêche le bouillonnement depuis l'élément central
  document.getElementById('c').addEventListener('click', function(e) {
    e.stopPropagation();                    
    this.style.backgroundColor = '#f00';
    return false;
  }, false);
  // la zone intermédiaire restera grise
  document.getElementById('pc').addEventListener('click', function(e) {
    this.style.backgroundColor = '#0f0';
    return false;
  }, false);
  // cette zone accepte la capture d'événement et deviendra jaune
  document.getElementById('dc').addEventListener('click', function(e) {
    this.style.backgroundColor = '#ff0';
    return false;
  }, true);                                 
 
  // illustration du bouillonnement, 
  // aucun élément n'accepte la capture
  document.getElementById('b').addEventListener('click', function(e) {
    this.style.backgroundColor = '#f00';
    return false;
  }, false);
  // on empêche le bouillonnement au niveau de la zone intermédiaire qui deviendra verte
  document.getElementById('pb').addEventListener('click', function(e) {
    e.stopPropagation();
    this.style.backgroundColor = '#0f0';
    return false;
  }, false);
  // la zone englobante restera grise
  document.getElementById('db').addEventListener('click', function(e) {
    this.style.backgroundColor = '#ff0';
    return false;
  }, false);  </pre>
  <script>
  // illustration de la capture
  // on empêche le bouillonnement depuis l'élément central
  document.getElementById('c').addEventListener('click', function(e) {
    e.stopPropagation();                    
    this.style.backgroundColor = '#f00';
    return false;
  }, false);
  // la zone intermédiaire restera grise
  document.getElementById('pc').addEventListener('click', function(e) {
    this.style.backgroundColor = '#0f0';
    return false;
  }, false);
  // cette zone accepte la capture d'événement et deviendra jaune
  document.getElementById('dc').addEventListener('click', function(e) {
    this.style.backgroundColor = '#ff0';
    return false;
  }, true);                                 
 
  // illustration du bouillonnement, 
  // aucun élément n'accepte la capture
  document.getElementById('b').addEventListener('click', function(e) {
    this.style.backgroundColor = '#f00';
    return false;
  }, false);
  // on empêche le bouillonnement au niveau de la zone intermédiaire qui deviendra verte
  document.getElementById('pb').addEventListener('click', function(e) {
    e.stopPropagation();
    this.style.backgroundColor = '#0f0';
    return false;
  }, false);
  // la zone englobante restera grise
  document.getElementById('db').addEventListener('click', function(e) {
    this.style.backgroundColor = '#ff0';
    return false;
  }, false);
  </script>
</body>
</html>

chok371 · 20/12/2010, 00h52

D'accord, donc le problème vient uniquement du bouillonnement (ou du bubbling) ?

Le fait qu'un événement fasse juste l'aller (et non le retour) ne pose donc pas de problème ?

Merci.

Bovino · 20/12/2010, 08h38

Présentation des événements du DOM

franculo_caoulene · 20/12/2010, 09h32

chok371, non, l'un comme l'autre peut causer des problèmes par méconnaissance ou oubli, mais peut aussi rendre service et être voulu.

Mes lectures sur le sujet commençaient à dater, je n'en ai donc pas parlé. IE gère ces événements d'une façon propre à lui. Le document proposé par Bovino l'explique.

mekal · 20/12/2010, 11h48

j'ai pu aussi constater une difference entre le modele ie et celui de firefox chrome opera c'est la facon de recupere l'element d'ou provient l'evenement

var lui=e ? e.currentTarget : event.srcElement;

exemple pour ie on notera qu'aucuns paramètres n'a été déclare

Code :

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

<img src='blabla' id='monid' onclick='mafonction()'>

Code :

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

1
2
3
4
5
6
function mafonction(){
 
var lelementcible=event.srcElement
 
alert(lelementcible.id)
}

exemple pour les autres navigateurs la on est obliger de rajouter comme paramettre event

Code :

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

<img src='blabla' id='monid' onclick='mafonction(event)'>

Code :

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

1
2
3
4
5
6
function mafonction(e){
 
var lelementcible= e.currentTarget
 
alert(lelementcible.id)
}

ie accepte aussi cette syntaxe mais le probleme vient quand on fait un ajout dynamique d'evenement avec ie et attacheEvent on est obliger de passer par event.srcElement

chok371 · 20/12/2010, 14h58

Ok, merci je comprends mieux.

19/12/2010, 19h59	#1
chok371 Nouveau Membre du Club Inscription : mars 2010 Messages : 82 Détails du profil Informations forums : Inscription : mars 2010 Messages : 82 Points : 27 Points : 27	[réglé] Différence entre l'effet bubbling et capturing Bonjour, J'ai une question sur les événements, j'ai compris qu'un événement pouvait se propager du haut vers le bas ou inverse dans l'arbre du DOM, et qu'on pouvait aussi stopper cette propagation. Mais en quoi c'est différent le sens dans lequel se propage l'événement ? ça change quoi dans une application ? Je ne vois pas de différence, par exemple, dans la méthode addEventListener* : je ne comprends pas l'utilité du 3ème argument booléen qui définie la manière dont l'événement va se propager. * rappel : http://www.quirksmode.org/js/events_advanced.html Merci de m'éclairer.
	00

20/12/2010, 08h38	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Présentation des événements du DOM __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

20/12/2010, 09h32	#5
franculo_caoulene Expert Confirmé Inscription : octobre 2003 Messages : 2 886 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 2 886 Points : 2 559 Points : 2 559	chok371, non, l'un comme l'autre peut causer des problèmes par méconnaissance ou oubli, mais peut aussi rendre service et être voulu. Mes lectures sur le sujet commençaient à dater, je n'en ai donc pas parlé. IE gère ces événements d'une façon propre à lui. Le document proposé par Bovino l'explique. __________________ Penser à la recherche et au bouton
	00

20/12/2010, 00h52	#3
chok371 Nouveau Membre du Club Inscription : mars 2010 Messages : 82 Détails du profil Informations forums : Inscription : mars 2010 Messages : 82 Points : 27 Points : 27	D'accord, donc le problème vient uniquement du bouillonnement (ou du bubbling) ? Le fait qu'un événement fasse juste l'aller (et non le retour) ne pose donc pas de problème ? Merci.
	00

20/12/2010, 14h58	#7
chok371 Nouveau Membre du Club Inscription : mars 2010 Messages : 82 Détails du profil Informations forums : Inscription : mars 2010 Messages : 82 Points : 27 Points : 27	Ok, merci je comprends mieux.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email