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?
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?
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>
É 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>