Até agora, usamos o JavaScript para selecionar e manipular elementos. Mas páginas modernas precisam ir além: elas devem responder às ações do usuário.

Essas ações são chamadas de eventos.

🎯 Objetivo da aula

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

  • Entender o que são eventos
  • Usar o método addEventListener
  • Trabalhar com cliques e interações básicas
  • Separar comportamento do HTML

🧠 O que é um evento?

Um evento é qualquer ação que acontece na página, geralmente provocada pelo usuário.

Exemplos comuns de eventos:

  • clique do mouse
  • movimento do mouse
  • digitação no teclado
  • envio de formulário

🔑 O método addEventListener

A forma moderna e correta de trabalhar com eventos é usando addEventListener. 

 elemento.addEventListener("evento", funcao);

Esse método diz ao JavaScript: “Quando esse evento acontecer, execute essa função.”

🎯 Exemplo: evento de clique

Vamos selecionar um botão e reagir a um clique: 

 <button id="meuBotao">Clique aqui</button> 
 
  let botao = document.querySelector("#meuBotao"); 
  botao.addEventListener("click", function() 
  { 
    console.log("Botão clicado!"); 
  });

Sempre que o botão for clicado, a mensagem será exibida no console.

🧠 Função anônima e eventos

É muito comum usar funções anônimas em eventos, pois elas são executadas apenas quando o evento acontece.

Eventos e funções anônimas andam quase sempre juntos.

⚠️ Não use eventos inline

Evite escrever eventos diretamente no HTML, como: 

 <button onclick="alert('Oi')">Clique</button>
Eventos inline misturam HTML e JavaScript e dificultam a manutenção.

🧠 Separação correta de responsabilidades

  • HTML → estrutura
  • CSS → visual
  • JavaScript → comportamento

Usar addEventListener respeita essa separação.

⚠️ E se o elemento não existir?

Se o elemento não existir no DOM, ocorrerá um erro ao adicionar o evento.

Sempre garanta que o elemento foi selecionado corretamente antes de usar eventos.

Resumo da aula para nunca mais esquecer

  • Eventos representam ações do usuário.
  • addEventListener é a forma correta de usar eventos.
  • Eventos disparam funções.
  • Evite eventos inline no HTML.

▶️ Próxima aula

Na próxima aula, vamos aprender a alterar conteúdo e estilos dos elementos usando JavaScript — e com isso fechamos o módulo básico 🎉

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.

Inteligência artificial

O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.