Events JavaScript bubbles

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

Extended explanation:

For example when we click on a button, we can capture the click event. This is an event that has property bubbles and 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><divid="pai">
  <div id="filho">
    <div id="neto">
      <button>Clica-me</button>
    </div>
  </div>
</div>

By clicking the button we see that the event passes through the 3 elements. 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><divid="pai">
  <div id="filho">
    <div id="neto">
      <input id="input" type="text" placeholder="clica aqui"></input>
    </div>
  </div>
</div>

This is because the focus event has false value in bubbles property.

To prevent this bubbling we can use .stopPropagation(); that applied to the first example would look like this:

$('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><divid="pai">
  <div id="filho">
    <div id="neto">
      <button>Clica-me</button>
    </div>
  </div>
</div>

This is a very simple concept, sometimes the form that is presented leaves a bit confusing, but basically a .bubbles event returns a Boolean value indicating whether a particular event is "bubbly." The term "bubble" comes from the idea of a bubble of water rising, ie the event is first captured in the innermost element and then propagated to external elements.

Following is an illustration presented in the quirksmode - order of events

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

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

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>elemento1<div>elemento2<div>elemento3<div>elemento4<div>elemento5</div></div></div></div></div><sectionid="log"></section>