Bubbling é o encadeamento de eventos que ocorre quando um elemento html trata um evento e seu elemento
container também trata esse mesmo evento.
Sendo assim ocorrerá o bubbling, ou seja, se o usuário clicar no elemento o evento será tratado
por este elemento e a seguir o evento do seu container também será disparado e assim por diante em
todos os elementos containers que tratem o evento de mesma natureza.
Bubling é o encadeamento de eventos de mesma espécie entre elementos filhos para pais. É o default do HTML.
Clique no form ou na div ou no parágrafo abaixo e veja o efeito bubbling.
Código :
<form onclick="alert('form')" style="margin: 10px; border: 1px solid blue;">
FORM
<div onclick="alert('div')" style="margin: 10px; border: 1px solid blue;">
DIV
<p onclick="alert('p')" style="margin: 10px; border: 1px solid blue;">P</p>
</div>
</form>
Note que ao clicar na tag p temos 3 mensagens, 1 da tag p, 2 da tag div e 3 da tag form.
Ao clicar na tag div teremos 2 mensagens : uma da tag div e outra da tag form.
Ao clicar na tag form teremos apenas uma mensagem, a da própria tag form.
Sendo assim o bubbling de eventos ocorre quando na ocorrência de um evento numa tag filha dispara o mesmo
evento na tag pai.
Com isto provamos que o bubbling de eventos é o default no JavaScript.
Parando o bubbling de eventos:
Para parar a escalada dos eventos adicione event.stopPropagation() no evento que deseja cancelar a
propagação do bubbling.
Existe outro modo de encadeamento de eventos chamado Capturing. Para mais detalhes veja :
Eventos Capturing