Introdução a Eventos e Ouvintes de Eventos
O que são eventos em JavaScript?
O JavaScript fornece mecanismos para lidar com esses eventos e executar códigos específicos em resposta, tornando sua aplicação web interativa e dinâmica.
Tipos comuns de eventos
Explicação de addEventListener() e Como Associar Listeners de Evento
Para responder a eventos em JavaScript, associa-se um listener de evento a um elemento. O método mais comum para isso é a função addEventListener(), que escuta eventos específicos e chama uma função quando o evento ocorre.
element.addEventListener('event', function, useCapture);
event: O tipo de evento que se deseja escutar (por exemplo,'click','submit');function: A função de callback a ser executada quando o evento for acionado;useCapture(opcional): Um valor booleano que indica se o evento deve ser capturado durante a fase de captura ou de propagação (o padrão éfalse, ou seja, escuta durante a fase de propagação).
Listener de Evento de Clique
Vamos associar um listener de evento click ao botão. Quando clicado, ele aciona um alerta.
index.html
index.css
index.js
O ouvinte de eventos é anexado ao elemento #myButton, e quando o usuário clica no botão, uma caixa de mensagem aparece com o texto "Button clicked!"
Ouvinte de Evento Submit
Adicionar um ouvinte de evento para o evento submit, prevenindo o comportamento padrão de envio do formulário para manipular os dados com JavaScript.
index.html
index.css
index.js
Um ouvinte de evento no evento submit do formulário impede o envio padrão com event.preventDefault(), permitindo que o JavaScript personalizado manipule os dados. Após o envio, o nome inserido é recuperado e exibido em um parágrafo com o ID displayName.
Evento Keypress
Vamos anexar um ouvinte de evento keypress ao campo de entrada. Quando uma tecla for pressionada, ela será exibida no parágrafo.
index.html
index.css
index.js
Toda vez que uma tecla é pressionada ao digitar no campo de entrada, a tecla pressionada é registrada no console.
Exemplo prático: Validação de formulário ao enviar
Vamos criar uma lógica para a validação do formulário antes do envio.
index.html
index.css
index.js
O listener de evento submit garante que o formulário não seja enviado se os campos obrigatórios estiverem vazios. Se o campo de nome de usuário ou senha estiver vazio, o evento é impedido de prosseguir e uma mensagem de erro é exibida.
1. Qual é o propósito de addEventListener()?
2. Qual das opções a seguir NÃO é um tipo de evento válido para addEventListener()?
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.22Introdução a Eventos e Ouvintes de Eventos
Deslize para mostrar o menu
O que são eventos em JavaScript?
O JavaScript fornece mecanismos para lidar com esses eventos e executar códigos específicos em resposta, tornando sua aplicação web interativa e dinâmica.
Tipos comuns de eventos
Explicação de addEventListener() e Como Associar Listeners de Evento
Para responder a eventos em JavaScript, associa-se um listener de evento a um elemento. O método mais comum para isso é a função addEventListener(), que escuta eventos específicos e chama uma função quando o evento ocorre.
element.addEventListener('event', function, useCapture);
event: O tipo de evento que se deseja escutar (por exemplo,'click','submit');function: A função de callback a ser executada quando o evento for acionado;useCapture(opcional): Um valor booleano que indica se o evento deve ser capturado durante a fase de captura ou de propagação (o padrão éfalse, ou seja, escuta durante a fase de propagação).
Listener de Evento de Clique
Vamos associar um listener de evento click ao botão. Quando clicado, ele aciona um alerta.
index.html
index.css
index.js
O ouvinte de eventos é anexado ao elemento #myButton, e quando o usuário clica no botão, uma caixa de mensagem aparece com o texto "Button clicked!"
Ouvinte de Evento Submit
Adicionar um ouvinte de evento para o evento submit, prevenindo o comportamento padrão de envio do formulário para manipular os dados com JavaScript.
index.html
index.css
index.js
Um ouvinte de evento no evento submit do formulário impede o envio padrão com event.preventDefault(), permitindo que o JavaScript personalizado manipule os dados. Após o envio, o nome inserido é recuperado e exibido em um parágrafo com o ID displayName.
Evento Keypress
Vamos anexar um ouvinte de evento keypress ao campo de entrada. Quando uma tecla for pressionada, ela será exibida no parágrafo.
index.html
index.css
index.js
Toda vez que uma tecla é pressionada ao digitar no campo de entrada, a tecla pressionada é registrada no console.
Exemplo prático: Validação de formulário ao enviar
Vamos criar uma lógica para a validação do formulário antes do envio.
index.html
index.css
index.js
O listener de evento submit garante que o formulário não seja enviado se os campos obrigatórios estiverem vazios. Se o campo de nome de usuário ou senha estiver vazio, o evento é impedido de prosseguir e uma mensagem de erro é exibida.
1. Qual é o propósito de addEventListener()?
2. Qual das opções a seguir NÃO é um tipo de evento válido para addEventListener()?
Obrigado pelo seu feedback!
