Fala aí, Ezequiel! Certinho, cara? =)
O que a explicação quer dizer é que podemos ter acesso ao evento que o usuário disparou...
Para exemplificar, vamos imaginar o envio dos dados de um formulário simples, de login:
<form action="login" method="post">
<label for="usuario">Nome</label>
<input type="text" id="usuario" name="usuario">
<label for="senha">Senha</label>
<input type="password" id="senha" name="senha">
<input type="submit" value="Login">
</form>
Quando o usuário preencher os campos e clicar no botão submit, ele fará uma requisição... Mas, e se quisermos fazer uma validação antes? Podemos ter uma função que faz isso:
function valida() {
// Faz a validação...
}
Repare que eu omiti a validação, porque vai de acordo com sua regra de negócio, então essa parte não nos interessa... Mas essa função ainda não está sendo chamada, vamos adicionar esse evento ao nosso formulário:
var form = document.querySelector("form");
form.addEventListener("submit", function() {
// Faz a validação...
});
Repare que ao realizar o submit, chamamos também nossa função anônima (antes valida()
)... Mas a requisição continua sendo feita! O que seria interessante aqui, é cancelar a requisição definida no atributo action
do <form>
para que a nossa validação fosse feita certinho... Para isso, podemos passar um parâmetro dentro da função, geralmente chamado de event
, pois representa o evento disparado pelo usuário:
form.addEventListener("submit", function (event) {
event.preventDefault();
// Faz a validação...
});
Sacou até aqui? =)
Basicamente, em toda função que associamos à algum evento disparado pelo usuário podemos pedir esse parâmetro event
, que representa justamente qual é esse evento... E, se desejarmos, podemos anulá-lo, com event.preventDefault()
, conseguiu entender? =)
Espero que tenha conseguido deixar um pouco mais claro para você e que tenha conseguido tirar sua dúvida, mas qualquer coisa não deixe de postar por aqui, no fórum, para que possamos continuar ajudando-o, ok? =)
Abraço e bons estudos,
Fábio