8

O que significa um Evento Bubble em JavaScript?

Não consegui entender o significado e uso dos eventos Bubbles. Seguindo a referência do W3schools: https://www.w3schools.com/jsref/event_bubbles.asp

Poderiam por favor, ajudar nesta referência?

1

2 Respostas 2

7

Resumo: bubbles é uma propriedade de alguns eventos e indica se o evento pode ser capturado fora do elemento onde foi criado, ou não.

Explicação alongada:

Por exemplo quando clica-mos num botão, podemos capturar o evento click. Esse é um evento que tem a propriedade bubbles e com valor true. Isso quer dizer que pode ser capturado ou interceptado em qualquer elemento pai desse mesmo.

Um exemplo:

$('div').on('click', function(e) {
  console.log('O evento passou por', this.id, e.bubbles);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pai">
  <div id="filho">
    <div id="neto">
      <button>Clica-me</button>
    </div>
  </div>
</div>

Clicando no botão vê-mos que o evento passa pelos 3 elementos. Ora o mesmo não acontece por exemplo no evento focus.

Exemplo:

$('div, input').on('focus', function(e) {
  console.log('O evento passou por', this.id, e.bubbles);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pai">
  <div id="filho">
    <div id="neto">
      <input id="input" type="text" placeholder="clica aqui"></input>
    </div>
  </div>
</div>

Isso porque o evento focus tem valor false na propriedade bubbles.

Para impedir essa propagação ("bubbling") podemos usar o .stopPropagation(); que aplicado ao primeiro exemplo seria assim:

$('div').on('click', function(e) {
  console.log('O evento passou por', this.id);
  // com esta condição, o evento não chega a "pai"
  if (this.id == 'filho') e.stopPropagation(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pai">
  <div id="filho">
    <div id="neto">
      <button>Clica-me</button>
    </div>
  </div>
</div>

7

É um conceito bem simples, às vezes a forma que é apresentado deixa um pouco confuso, mas basicamente um evento .bubbles retorna um valor booleano indicando se determinado evento é "borbulhante". O termo "borbulhar" vem da ideia de uma bolha de água que sobe, ou seja, o evento é primeiro capturado no elemento mais interno e depois propagado para elementos externos.

Segue uma ilustração apresentada no quirksmode - ordem de eventos

               / \
---------------| |-----------------
| elemento1    | |                |
|   -----------| |-----------     |
|   |elemento2 | |          |     |
|   -------------------------     |
|        Evento BUBBLING          |
-----------------------------------

E um exemplo que mostra na prática a ordem da propagação:

var divs = document.getElementsByTagName('div');

function bubble() {
  log('bubble: ' + this.firstChild.nodeValue.trim())
}

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

var $log = $('#log');

function log(msg) {
  $log.append('<p>' + msg + '</p>');
}
div {
  border: 1px solid red;
  padding: 5px;
  min-height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>elemento 1
  <div>elemento 2
    <div>elemento 3
      <div>elemento 4
        <div>elemento 5</div>
      </div>
    </div>
  </div>
</div>
<section id="log"></section>

2
  • 1
    +1, gostei da referência old school pro quirksmode
    – bfavaretto
    Commented 27/04/2017 às 2:46
  • @bfavaretto "for all your browser quirks" hehe, nem eu sabia que era tão old.
    – Mathiasfc
    Commented 27/04/2017 às 3:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .