Até aqui, vimos eventos de mouse e teclado. Mas a maior parte da interação do usuário com uma aplicação acontece em inputs, formulários e campos de texto.

Nesta aula, vamos aprender os eventos certos para lidar com digitação, foco, mudanças de valor e envio de formulários.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Usar eventos de formulário corretamente
  • Entender a diferença entre input e change
  • Capturar foco e perda de foco
  • Controlar o envio de formulários
  • Criar validações em tempo real

O evento input

O evento input é disparado toda vez que o valor do campo muda.

Ele é ideal para validações em tempo real. 

 
  const campo = document.getElementById("nome");
  campo.addEventListener("input", (event) => 
  {
    console.log(event.target.value);
  });

 console.log(event.target.value); // Saída será o texto digitado em tempo real

input vs keydown

Diferença importante:

  • keydown → detecta a tecla
  • input → detecta o valor final
Para trabalhar com texto digitado, prefira sempre input.

O evento change

O change é disparado quando:

  • O valor muda
  • E o campo perde o foco
 campo.addEventListener("change", () => { console.log("Valor confirmado"); }); 
 console.log("Valor confirmado"); // Saída ocorre ao sair do campo

Muito usado para:

  • Selects
  • Confirmações de valor

focus e blur

Esses eventos detectam quando o campo ganha ou perde foco. 

 
  campo.addEventListener("focus", () => 
  { 
    console.log("Campo em foco"); });
    campo.addEventListener("blur", () =>
    {
      console.log("Campo perdeu foco");
    });

 console.log("Campo em foco"); // Ao clicar no campo console.log("Campo perdeu foco"); // Ao sair do campo

Eles são muito usados para:

  • Mostrar mensagens de ajuda
  • Validações
  • Destaques visuais

O evento submit

O submit é disparado quando o formulário é enviado. 

 
  const form = document.getElementById("formulario");
  form.addEventListener("submit", (event) => 
  {
    event.preventDefault();
    console.log("Formulário enviado");
  });

 console.log("Formulário enviado"); // Saída ocorre ao clicar em enviar

O preventDefault impede o recarregamento da página.

Exemplo real: validação simples

 campo.addEventListener("input", () => { if (campo.value.length < 3) { campo.classList.add("erro"); } else { campo.classList.remove("erro"); } });

Aqui combinamos:

  • Evento input
  • Manipulação de classes CSS

Boas práticas com formulários

  • Use input para texto em tempo real
  • Use change para confirmação
  • Use submit no formulário, não no botão
  • Sempre trate o envio com preventDefault
Formulários são o coração de muitas aplicações web.

Resumo da aula para nunca mais esquecer

  • input reage a cada mudança de valor
  • change reage após confirmação
  • focus e blur controlam foco
  • submit controla o envio do formulário
  • Essenciais para validações e UX

Na próxima aula, vamos fechar esse mini-bloco com uma introdução ao Drag and Drop.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Mouse

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Donkey Kong

A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.