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.
index.html
index.css
index.js
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).
index.html
index.css
index.js
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.
index.html
index.css
index.js
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.
index.html
index.css
index.js
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.
1. Que informação a propriedade event.target fornece?
2. Por que você pode usar event.preventDefault() em um evento de envio de formulário?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.22Compreensão do Objeto de Evento em JavaScript
Deslize para mostrar o menu
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.
index.html
index.css
index.js
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).
index.html
index.css
index.js
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.
index.html
index.css
index.js
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.
index.html
index.css
index.js
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.
1. Que informação a propriedade event.target fornece?
2. Por que você pode usar event.preventDefault() em um evento de envio de formulário?
Obrigado pelo seu feedback!
