Event Bubbling no JavaScript
O Event bubbling ocorre quando um usuário interage com um elemento no HTML e o evento se propaga como “bolhas” por todos os elementos que estão aninhados a ele.
Para explicar esse processo, imagine um copo com refrigerante aonde as bolhas borbulham do fundo do copo até o ponto mais alto. O princípio do efeito bubbling no JavaScript é exatamente o mesmo.
Quando um evento “bubbling” é realizado sobre um determinado elemento, todos os ancestrais dele também serão acionados em ordem crescente de aninhamento até chegar ao último elemento:
Para demonstrar esse comportamento as bolhas serão representadas pelos elementos pai, filho e neto:
O efeito de “borbulhamento” se comporta da seguinte forma:
- Ao clicar no elemento neto, a ação vinculada a ele será disparada e depois os elementos acima dele também serão disparados, no caso o elemento filho e depois o elemento pai.
- Ao clicar no elemento filho, elemento filho e pai serão disparados, uma vez que existe uma relação de maior proximidade entre eles. O neto não será acionado, pois o efeito irá do elemento selecionado até o ponto mais alto.
Sabe-se então que todos os ancestrais que estão aninhados a ele também conseguirão identificar este evento, além do elemento que foi acionado.
Neste caso um EventListener poderá ser adicionado apenas no elemento pai e ele ficaria com a responsabilidade de identificar qual dos seus filhos foi o alvo da ação.
StopPropagation
No exemplo anterior é possível verificar que o efeito percorre todos os elementos, sempre partindo do item selecionado até o elemento mais alto. Mas, e para interromper esse efeito, como fazer?
Para que isso aconteça, o método stopPropagation() deve ser empregado. Ou seja, quando o elemento neto for clicado, será exibida a mensagem no console e o efeito cessará, sendo interrompido, conforme a ilustração abaixo:
Referências
That’s all folks! 🙂
