DEV Community

Juliane Pires
Juliane Pires

Posted on

Event Bubbling

Referência

Você já reparou no comportamento de uma garrafa ou copo de refrigerante? Percebeu como as bolhas se deslocam do fundo até o topo do copo?

soda bubbling

O event bubbling no javascript funciona de maneira similar, quando alguma ação ou interação com o HTML é feita por um componente filho, o evento que é causado por efeito colateral é propagado como uma "bolha" até o elemento pai, que lida com o mesmo.

Prática

Podemos observar os seguintes elementos:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <div onclick="alert('elemento pai')">
      FORM
      <div onclick="alert('elemento filho')">
        DIV
        <div onclick="alert('elemento neto')">P</div >
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Ao clicarmos no elemento neto temos o efeito bubbling e o evento será propagado e acionado nos demais elementos ancestrais, ou seja, ocorrerão três alertas:

alerta 1 “elemento neto”

alerta 2 “elemento filho”

alerta 3 “elemento pai”

Como essa propagação só ocorre entre os ancestrais, esse movimento nos três elementos só funciona partindo do elemento neto. Caso o clique seja aplicado no elemento filho, a propagação trará o seguinte resultado:

alerta 1 “elemento filho”

alerta 2 “elemento pai”

Podemos verificar o comportamento:

Interromper Propagação

Para que a propagação seja interrompida, devemos utilizar o stopPropagation. Assim, quem lidará com o evento será o próprio elemento e não chegará aos elementos ancestrais.

Podemos observar então esse comportamento:

Ao clicarmos no elemento filho, a propagação não irá ocorrer para o elemento pai porque foi interrompida, o mesmo não ocorrerá para o elemento neto pois a propagação só funciona para elementos ascendentes.

Também podemos observar que, após o clique no elemento neto, o evento se propaga para o elemento filho e para nele, interrompendo a propagação.

É isto!

Para mais informações, aqui fica o artigo de inspiração eventBubbling Javascript

Top comments (0)