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?

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".