[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.:?

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:

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>

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.

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

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.

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:

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

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:

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

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

Ok, merci je comprends mieux.