JavaScript

Qual a diferença entre event.stopPropagation e event.preventDefault em JS

22 de junho de 2021

Qual a diferença entre event.stopPropagation e event.preventDefault em JS

Neste artigo você vai aprender qual a diferença entre event.stopPropagation e event.preventDefault em JavaScript

diferença entre event.stopPropagation e event.preventDefault capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x