Qu'est-ce que le bullage et la capture d'événements ?

Question

Quelle est la différence entre le bouillonnement et la capture d'événements ? Quand faut-il utiliser le bullage ou la capture ?

Answer 1

Bubbling

  Event propagate to the upto root element is **BUBBLING**.

Capturer

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

Answer 2

DOM Events décrit 3 phases de propagation des événements : Phase de capture - l'événement descend jusqu'à l'élément. Phase cible - l'événement a atteint l'élément cible. Phase de bouillonnement - l'événement bouillonne à partir de l'élément.

Answer 3

Comme d'autres l'ont dit, le bullage et la capture décrivent dans quel ordre certains éléments imbriqués reçoivent un événement donné.

Je voulais souligner que pour le le plus intime peut sembler étrange. En effet, dans ce cas, l'élément commander dans lequel les écouteurs d'événements sont ajoutés importe .

Dans l'exemple suivant, la capture de div2 sera exécuté d'abord que le bullage ; alors que le bullage pour les div4 sera exécuté en premier avant de capturer.

function addClickListener (msg, num, type) {
  document.querySelector("#div" + num)
    .addEventListener("click", () => alert(msg + num), type);
}
bubble  = (num) => addClickListener("bubble ", num, false);
capture = (num) => addClickListener("capture ", num, true);

// first capture then bubble
capture(1);
capture(2);
bubble(2);
bubble(1);

// try reverse order
bubble(3);
bubble(4);
capture(4);
capture(3);

#div1, #div2, #div3, #div4 {
  border: solid 1px;
  padding: 3px;
  margin: 3px;
}

<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>
<div id="div3">
  div 3
  <div id="div4">
    div 4
  </div>
</div>