Javascript-Bubbling

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.

FORM
DIV

P



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