Na primeira aula de "JavaScript na Web: armazenando dados no navegador" o Pedro Lima utiliza a função/método 'preventDefault()'.
Não ficou muito claro para mim o seu funcionamento e quando utilizar.
Se alguém puder me ajudar, agradeço!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Na primeira aula de "JavaScript na Web: armazenando dados no navegador" o Pedro Lima utiliza a função/método 'preventDefault()'.
Não ficou muito claro para mim o seu funcionamento e quando utilizar.
Se alguém puder me ajudar, agradeço!
Oi Thiago, tudo bem?
A função 'preventDefault()' é uma função utilizada em JavaScript para evitar que o comportamento padrão de um evento ocorra. Ela é usada principalmente em manipulação de eventos relacionados a elementos HTML, como cliques em links, envio de formulários, entre outros. O objetivo dessa função é interromper a execução padrão do evento, permitindo que você defina seu próprio comportamento personalizado para o evento em questão.
Vamos a um exemplo para entender melhor. Suponha que você tenha um formulário HTML com um botão de envio (submit) e você queira adicionar uma validação antes de permitir que o formulário seja enviado. Você pode utilizar a função 'preventDefault()' para evitar que o formulário seja submetido até que sua validação seja concluída.
Aqui está um exemplo de como você pode usar a função 'preventDefault()' em um formulário:
<form id="meuFormulario">
<input type="text" id="nome" required>
<input type="submit" value="Enviar">
</form>
<script>
document.getElementById("meuFormulario").addEventListener("submit", function(event) {
event.preventDefault(); // Evita que o formulário seja enviado
// Coloque aqui a lógica de validação do formulário
// Por exemplo, verificar se o campo de nome foi preenchido corretamente
if (validacaoPassou) {
// Se a validação passar, você pode enviar o formulário manualmente
this.submit();
} else {
// Caso contrário, mostre uma mensagem de erro ou faça qualquer ação necessária
}
});
</script>No exemplo acima, estamos adicionando um ouvinte de eventos ao formulário com o uso do método 'addEventListener()'. Esse método permite que você especifique uma função para ser executada quando um determinado evento ocorre. Neste caso, estamos escutando o evento "submit" do formulário.
Dentro da função de tratamento de evento, chamada de "callback", utilizamos o parâmetro 'event' para acessar o objeto de evento associado à submissão do formulário. Em seguida, utilizamos a função 'preventDefault()' para evitar que o formulário seja enviado imediatamente.
Depois disso, você pode adicionar sua lógica de validação personalizada. Se a validação for bem-sucedida, você pode chamar manualmente o método 'submit()' no formulário para enviá-lo. Caso contrário, você pode exibir uma mensagem de erro, fazer ajustes nos campos do formulário ou qualquer outra ação necessária.
Em resumo, a função 'preventDefault()' é útil quando você deseja controlar o comportamento padrão de um evento HTML e adicionar sua própria lógica personalizada. Ela permite que você evite a execução padrão do evento, como a submissão de um formulário ou a abertura de um link, e dê a você a liberdade de definir o comportamento desejado.
Espero ter te ajudado.
Um abraço e bons estudos.