Czym jest zjawisko bulgotania i przechwytywania?

Opis:

quirksmode.org ma ładny opis tego. W skrócie (skopiowane z quirksmode):

Przechwytywanie zdarzeń

Gdy używasz przechwytywania zdarzeń

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Obsługa zdarzeń element1 zostanie wywołana jako pierwsza, obsługa zdarzeń element2 zostanie wywołana jako ostatnia.

Event bubbling

Kiedy używasz event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Obsługa zdarzenia element2 zostanie wywołana jako pierwsza, Obsługa zdarzenia element1 zostanie wywołana jako ostatnia.

Czego użyć?

Jeśli istnieją dwa elementy element 1 i element 2. Element 2 jest wewnątrz elementu 1 i dołączamy obsługę zdarzeń z obu elementów powiedzmy onClick. Teraz, gdy klikniemy na element 2, eventHandler dla obu elementów zostanie wykonany. Teraz pytanie brzmi, w jakiej kolejności zdarzenie zostanie wykonane. Jeśli zdarzenie dołączone do elementu 1 zostanie wywołane jako pierwsze, nazywa się to przechwytywaniem zdarzeń, a jeśli zdarzenie dołączone do elementu 2 zostanie wywołane jako pierwsze, nazywa się to bulgotaniem zdarzeń. Zgodnie z W3C Zdarzenie rozpocznie się w fazie przechwytywania, dopóki nie dotrze do celu, wróci do elementu, a następnie zacznie bulgotać

Stany przechwytywania i bąbelkowania są znane za pomocą parametru useCapture metody addEventListener

EventTarget.addEventListener(type, listener, [, useCapture]);

Domyślnie useCapture jest false. To znaczy, że jest w fazie bulgotania.

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);

#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}

<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

Proszę spróbować zmienić true I false.

Znalazłem ten tutorial na javascript.info aby być bardzo jasne w wyjaśnieniu tego tematu. A jego 3-punktowe podsumowanie na końcu naprawdę mówi o kluczowych punktach. Cytuję tutaj:

1. zdarzenia najpierw są rejestrowane w dół do najgłębszego celu, a następnie bańki w górę. W IE
2. wszyscy handlerzy pracują na scenie z wyjątkiem addEventListener z ostatnim argumentem true, który jest jedynym sposobem na Złap wydarzenie na scenie przechwytywania.
3. Bubbling / przechwytywanie może być zatrzymany przez zdarzenie.cancelBubble = true (IE) lub event.stopropagacja() dla innych przeglądarek.

Jest też Event.eventPhase właściwość, która może Ci powiedzieć, czy zdarzenie jest w punkcie docelowym lub pochodzi z innego miejsca.

Należy pamiętać, że kompatybilność przeglądarki nie jest jeszcze ustalona. Testowałem go na Chrome (66.0.3359.181) i Firefox (59.0.3) i jest tam obsługiwany.

Rozszerzając na już Wielki fragment z zaakceptowanej odpowiedzi , jest to wyjście przy użyciu właściwości eventPhase

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML += ('<p>' + msg + '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target's ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event's target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target's ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}

p {
  line-height: 0;
}

div {
  display:inline-block;
  padding: 5px;

  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
}

div:hover {
  border: 1px solid #faa;
  background: #fdd;
}

<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>