Eventos Bubbles Javascript

Question

What a Javascript Bubble Event means?

I couldn’t understand the meaning and use of the Bubbles events. Following the W3schools reference: https://www.w3schools.com/jsref/event_bubbles.asp

Could you please help with this reference?

Answer 1

It’s a very simple concept, sometimes the shape that is presented leaves a little confusing, but basically an event .bubbles returns a boolean value indicating if a given event is "bubbling". The term "bubbling" comes from the idea of a rising water bubble, i.e., the event is first captured in the innermost element and then propagated to external elements.

Below is an illustration from quirksmode - order of events

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

And an example that shows in practice the order of propagation:

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>

Answer 2

Summary: bubbles is a property of some events and indicates whether the event can be captured outside the element where it was created, or not.

Lengthy explanation:

For example when we click on a button, we can capture the event click. This is an event that has the property bubbles and with value true. This means that it can be captured or intercepted in any parent element of the same.

An example:

$('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>

By clicking on the button we see that the event passes through the 3 elements. Now the same does not happen for example in the event focus.

Example:

$('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>

That’s because the event focus has value false on the property bubbles.

To prevent such spread ("Bubbling") we can use the .stopPropagation(); that applied to the first example would be so:

$('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>