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