[r�gl�] Diff�rence entre l'effet bubbling et capturing

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

Invit� · 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.

[r�gl�] Diff�rence entre l'effet bubbling et capturing

JavaScript

Discussions similaires

Partager

Partager