Eventos em JavaScript

O que é um evento?

• O navegador detecta interacoes e avisa o codigo
• JavaScript reage no momento certo
• Eventos sao a base de interfaces interativas
• Hoje: clique, teclado, formularios e fluxo do DOM

Eventos em JavaScript

Roteiro da Aula

• O que é um evento
• Como registrar os listeners
• O que vem no objeto event
• Tipos mais comuns e quando usar
• preventDefault() e stopPropagation()
• Exercícios

Eventos em JavaScript

Definição

O Que é um Evento?

• Um acontecimento detectado pelo navegador
• Pode vir do usuário, da página ou da janela
• O código não fica rodando "sem motivo"
• Ele executa uma resposta quando algo acontece

Exemplos: click, keydown, input, submit, load

Eventos em JavaScript

Fluxo Mental

1. Selecionar o elemento
2. Escolher o tipo do evento
3. Definir a função tratadora
4. Registrar com addEventListener()

const botao = document.querySelector('button');

function clicar() {
  botao.textContent = 'Fui clicado';
}

botao.addEventListener('click', clicar);

Eventos em JavaScript

Criando Tratadores de Evento

• addEventListener(): Forma recomendada para associar eventos
• Função nomeada: quando for reutilizar

elemento1.addEventListener('nomeDoEvento', funcao);
elemento2.addEventListener('nomeDoEvento', funcao);

function funcao() {
  // logica a ser executada quando o evento acontecer
}

Eventos em JavaScript

Função anônima e Arrow Function

• addEventListener(): Forma recomendada para associar eventos

// Funcao anonima
botao.addEventListener('click', function() {
  botao.textContent = 'Fui clicado';
});

// Arrow function
botao.addEventListener('click', () => {
  botao.textContent = 'Fui clicado';
});

Eventos em JavaScript

O Objeto event

• Traz informações sobre o acontecimento
• Permite inspecionar origem, tipo e dados da interação

campo.addEventListener('input', (event) => {
  console.log(event.key);
});

• event.target: onde o evento aconteceu
• event.currentTarget: quem executa o tratador
• event.type: tipo do evento
• event.key: tecla pressionada
• event.clientX, event.clientY: coordenadas do mouse

Eventos em JavaScript

Categorias Mais Comuns

Eventos em JavaScript

target x currentTarget

<div id="card">
  <button id="botao">Clique</button>
</div>

const card = document.querySelector('#card');
const botao = document.querySelector('#botao');
card.addEventListener('click', (event) => {
  console.log('target:', event.target.id);
  console.log('currentTarget:', event.currentTarget.id);
});

Eventos em JavaScript

Propagacao de Eventos

• No bubbling, o evento sobe do filho para os pais
• Um clique no botão pode chegar ao card
• Isso explica tratadores disparando em cadeia

card.addEventListener('click', () => {
  console.log('card');
});
botao.addEventListener('click', () => {
  console.log('botao');
});

Eventos em JavaScript

preventDefault() x stopPropagation()

Eventos em JavaScript

Exercício: Clique básico

• Crie um jogo com 2 botões
• Use ids nos botões para selecionar no JS
• Selecione cada um com document.querySelector('#id')
• Quando o primeiro for clicado, adiciona 1 ponto
• Quando o segundo for clicado:
  • Remova 10 pontos
  • Pontos não podem ser negativos
• Exiba a pontuação atualizada no textContent do próprio botão
• Veja um exemplo de como pode ficar

Eventos em JavaScript

Exercício: Clique com upgrade

• Crie um jogo com 2 botões
  • Parecido ao exercício anterior
• O primeiro botão quando clicado adiciona 1 ponto
• O segundo botão quando clicado:
  • Remove uma quantidade de pontos que aumenta a cada clique
  • Aumenta a produção de pontos do primeiro botão em 1 ponto a cada clique
  • Aumenta o custo da próxima melhoria
• Exiba a pontuação atualizada no textContent de um elemento separado
• Veja um exemplo de como pode ficar

Eventos em JavaScript

Exercício: Nave espacial

• Crie um jogo onde o usuário controla uma nave com as setas do teclado
• Use o evento keydown para detectar as teclas pressionadas:
  • document.body.addEventListener('keydown', (event) => {...});
  • event.key traz a tecla pressionada
• Atualize a posição da nave usando style.left e style.top
  • nave.style.left = novaPosicaoX + 'px';
• Use esta imagem para a nave
• Veja um exemplo de como pode ficar

Eventos em JavaScript

Exercício: Nave espacial