Modulo 3 / JavaScript

Eventos

Click, submit, input e delegação de eventos.

school Aula 15 schedule 2 horas

Conceito

O que são eventos?

touch_app Interação do usuário

▸ Eventos são ações que acontecem na página
▸ O navegador "ouve" essas ações e pode reagir a elas
▸ Exemplos: clique, digitação, scroll, envio de formulário
▸ JavaScript registra "ouvintes" (listeners) nos elementos

category Tipos de eventos

click

Clique do mouse

submit

Envio de formulário

input

Digitação em campo

keydown

Tecla pressionada

mouseover

Mouse sobre elemento

change

Valor alterado

Registrando eventos

addEventListener

star Forma recomendada

const btn = document
  .querySelector('#meuBtn');

btn.addEventListener('click', () => {
  console.log('Clicou!');
});

lightbulb Permite registrar múltiplos listeners no mesmo elemento.

close Formas antigas (evitar)

// Inline no HTML (nao usar)
<button onclick="fn()">...</button>

// Propriedade on (limita a 1 listener)
btn.onclick = () => {
  console.log('Clicou!');
};

// Se atribuir de novo, sobrescreve!
btn.onclick = () => {
  console.log('Perdeu o anterior');
};

Informacoes do evento

O objeto event

info Recebendo o evento

btn.addEventListener('click', (event) => {
  console.log(event.type);
  // "click"

  console.log(event.target);
  // o elemento clicado

  console.log(event.target.textContent);
  // texto do elemento
});

list Propriedades úteis

event.target Elemento que disparou o evento

event.type Tipo do evento (click, submit...)

event.key Tecla pressionada (keydown)

event.preventDefault() Cancela o comportamento padrão

event.currentTarget Elemento que tem o listener

Na prática

Evento click

HTML

<button id="contador">Cliques: 0</button>

<button id="tema">Alternar tema</button>

JavaScript

// Contador de cliques
let cliques = 0;
const btnContador = document
  .querySelector('#contador');

btnContador.addEventListener('click', () => {
  cliques++;
  btnContador.textContent =
    `Cliques: ${cliques}`;
});

// Toggle de tema
const btnTema = document
  .querySelector('#tema');

btnTema.addEventListener('click', () => {
  document.body.classList
    .toggle('dark');
});

pattern Padrão: selecionar, ouvir, reagir

1 Selecionar o elemento com querySelector

2 Ouvir o evento com addEventListener

3 Reagir executando uma função callback

lightbulb Esse padrão se repete em praticamente toda interatividade web.

Entrada de dados

Evento input

<input id="busca" placeholder="Buscar...">
<p id="resultado"></p>

<script>
const input = document.querySelector('#busca');
const resultado = document.querySelector('#resultado');

// Dispara a cada caractere digitado
input.addEventListener('input', (e) => {
  resultado.textContent =
    `Buscando: ${e.target.value}`;
});
</script>

compare_arrows input vs change

input

Dispara a cada tecla digitada, em tempo real. Ideal para buscas, previews e validação instantânea.

change

Dispara quando o campo perde foco (blur) e o valor mudou. Ideal para selects e campos onde a confirmação importa.

keydown / keyup

Tecla pressionada / solta. Acesso a event.key para saber qual tecla.

Formulários

Evento submit

<form id="formLogin">
  <input id="email" type="email" required>
  <input id="senha" type="password" required>
  <button type="submit">Entrar</button>
</form>

<script>
const form = document
  .querySelector('#formLogin');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Impede recarregar a página

  const email = document
    .querySelector('#email').value;
  const senha = document
    .querySelector('#senha').value;

  console.log(`Login: ${email}`);
});
</script>

warning preventDefault() é essencial

Por padrão, o formulário recarrega a página ao ser enviado. Use e.preventDefault() para:

▸ Processar os dados com JavaScript
▸ Validar campos antes de enviar
▸ Enviar via fetch/API sem recarregar
▸ Exibir mensagens de feedback na tela

lightbulb Sempre coloque o listener no form, nunca no botão submit.

Gerenciamento

Removendo listeners

delete_sweep removeEventListener

// A função precisa ter nome
function handleClick() {
  console.log('Clicou!');
}

// Adicionar
btn.addEventListener(
  'click', handleClick
);

// Remover
btn.removeEventListener(
  'click', handleClick
);

bolt Evento de uso único

// Executa apenas UMA vez
btn.addEventListener('click', () => {
  console.log('Só uma vez!');
}, { once: true });

lightbulb A opção { once: true } remove automaticamente o listener após a primeira execução.

Padrão avancado

Delegação de eventos

<ul id="lista">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
// Listener no PAI, nao nos filhos
const lista = document.querySelector('#lista');

lista.addEventListener('click', (e) => {
  // Verificar se clicou num <li>
  if (e.target.tagName === 'LI') {
    e.target.classList
      .toggle('feito');
  }
});
</script>

info Por que usar delegação?

▸ Performance: um listener em vez de centenas
▸ Elementos dinâmicos: funciona com itens adicionados depois
▸ Menos código: não precisa adicionar listener a cada item

Como funciona:

Os eventos "sobem" (bubbling) do elemento clicado até o document. Ao ouvir no pai, usamos event.target para saber qual filho foi clicado.

Hora de praticar

Exercício prático

rocket_launch Lista de tarefas interativa

Crie um formulário com um input e botão "Adicionar"
Ao enviar o formulário (submit), adicione a tarefa como um <li> na lista
Use preventDefault() para impedir o reload da página
Use delegação de eventos na <ul> para que ao clicar em uma tarefa ela fique riscada
Adicione um botão "X" em cada tarefa para removê-la ao clicar
Adicione um campo de busca com evento input que filtra as tarefas em tempo real

lightbulb Desafio extra: salve as tarefas no localStorage para que persistam ao recarregar.

Próxima aula

Aula 16

Fetch API: consumo de APIs externas e async/await.

task_alt O que aprendemos hoje

check_circle addEventListener e o padrão selecionar, ouvir, reagir
check_circle Objeto event e suas propriedades
check_circle Eventos click, input, submit e keydown
check_circle preventDefault() e removeEventListener
check_circle Delegação de eventos e event bubbling

Próxima aula

auto_stories Referência: MDN Events