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
Can you explain how to use event.target in a real example?
What other useful properties are available on the event object?
How does preventDefault() differ from stopPropagation()?
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!
