Introdução a Eventos e Ouvintes de Eventos

O que são eventos em JavaScript?

O JavaScript oferece 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 do addEventListener() e Como Anexar Ouvintes de Evento

Para responder a eventos em JavaScript, é necessário anexar um ouvinte 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 você 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).

Ouvinte de Evento de Clique

Vamos anexar um ouvinte de evento click ao botão. Quando clicado, ele dispara um alerta.

O ouvinte de evento é 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

Adição de um ouvinte de evento para o evento submit, prevenindo o comportamento padrão de envio do formulário para manipular os dados com JavaScript.

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. Ao enviar, 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.

Toda vez que uma tecla é pressionada enquanto se digita no campo de entrada, a tecla pressionada é registrada no console.

Exemplo prático: Validação de formulário ao enviar

Criação de lógica para validação do formulário antes do envio.

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.