Compreensão do Objeto de Evento em JavaScript

Sempre que um evento ocorre em JavaScript, um objeto event é automaticamente passado para o manipulador de eventos. Esse objeto contém informações importantes sobre o evento, como o elemento que o disparou (target), o tipo de evento (type) e métodos para controlar o comportamento do evento, como preventDefault() e stopPropagation().

Acessando informações relacionadas ao evento

O objeto event contém várias propriedades e métodos úteis que permitem acessar informações sobre o evento e interagir com ele.

target

A propriedade target refere-se ao elemento que disparou o evento. Ela permite identificar qual elemento foi clicado, passou o mouse ou sofreu alguma interação.

event.target é utilizado para identificar o botão específico que foi clicado, e seu id é exibido no parágrafo com o ID display.

type

A propriedade type fornece o tipo de evento que ocorreu (por exemplo, click, submit, keydown).

O event.type é exibido no parágrafo como feedback, mostrando que um evento click ocorreu. Além disso, quando o botão é clicado, a cor de fundo de todo o corpo é alterada para lightblue.

Método preventDefault() no Objeto Event

O método preventDefault() interrompe o comportamento padrão de um elemento, como impedir que um link navegue ou evitar o envio de um formulário.

Aqui, preventDefault() impede a ação padrão (navegar para uma nova página) ao clicar no link. Em vez disso, um alerta é exibido.

Exemplo prático: Manipulação de envio de formulário e uso do objeto de evento

Validação de formulário, impedindo o envio caso os campos estejam vazios, e exibição dos dados do formulário juntamente com informações relacionadas ao evento, como target, type e como preventDefault() impede o envio padrão do formulário.

Quando o formulário "Sign Up" é enviado, um ouvinte de evento intercepta o envio com event.preventDefault(). Se o campo de nome de usuário ou senha estiver vazio, uma mensagem de erro é exibida; caso contrário, uma mensagem de sucesso aparece, mostrando o nome de usuário enviado. Além disso, detalhes sobre o evento—como tipo, ID do formulário e se a ação padrão foi impedida—são exibidos em uma seção dedicada. O formulário é então redefinido para uso posterior.