Neste artigo você vai aprender qual a diferença entre event.stopPropagation e event.preventDefault em JavaScript
Fala programador(a), beleza? Bora aprender mais sobre eventos, propagação, comportamento default e também JavaScript!
Estes dois métodos são comumente utilizados em eventos, como os de click por exemplo
E a suas definições e utilizações são bem simples!
O método stopPropagation remove a propagação do evento do DOM, e o que isso quer dizer?
O JS tem uma fase chamada bubble, onde um evento de um elemento filho pode ser reproduzido por outros elementos
Ou seja, o usuário ativa um evento no elemento filho, e por meio deste click ele é ativado novamente no elemento pai, tendo sua execução realizada duas vezes
Podemos impedir isso com o stopPropagation!
Já o preventDefault é para um caso mais simples, ele vai remover o comportamento default daquele evento
Exemplo: clicamos num botão de submit de um formulário, mas queremos realizar validações antes
Precisamos então inserir um preventDefault neste evento, para que form não seja enviado
Então podemos prosseguir com outras linhas de código JS e realizar a ação que queremos no nosso software
Este caso de preventDefault em formulário é o mais “emblemático”, muito utilizado nas aplicações web
Conclusão
Neste artigo você aprendeu a diferença entre event.stopPropagation e event.preventDefault em JavaScript
Utilizamos o stopPropagation para parar um comportamento chamado de bubble, que, basicamente, pode executar um evento diversas vezes de forma desnecessária
Já o preventDefault ignora o comportamento padrão daquele evento, ele pode parar o envio de formulários, por exemplo
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!