Eventos em JavaScript

Eventos são "sinais" enviados pelo usuário ou pelo navegador — quando um usuário clica em um botão, pressiona uma tecla, envia um formulário, ou o navegador termina de carregar uma página... tudo isso são eventos. Seu código "ouve" esses eventos e responde no momento certo. É como uma campainha tocando e você abrindo a porta — a campainha é o evento, abrir a porta é a resposta.

Métodos de Vinculação de Eventos

O JavaScript tem três formas de vincular manipuladores de eventos a elementos:

1. Atributos HTML (Não Recomendado)

<button onclick="alert('Não use este método')">Clique aqui</button>

HTML e JS são misturados, dificultando a manutenção. Não recomendado.

2. Propriedades do DOM

<button id="myBtn">Clique aqui</button>
<script>
const btn = document.getElementById('myBtn');
btn.onclick = function() {
  console.log('Clicado');
};
</script>

HTML e JS são separados, mas cada evento só pode ter um manipulador — atribuições posteriores sobrescrevem as anteriores.

3. addEventListener (Recomendado)

<button id="btn1">Botão 1</button>
<button id="btn2">Botão 2</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
  console.log('Manipulador 1');
});
btn1.addEventListener('click', function() {
  console.log('Manipulador 2');
});
</script>

O mesmo evento pode ter múltiplos manipuladores, e você pode usar removeEventListener para removê-los. Esta é a abordagem mais flexível.

addEventListener e removeEventListener

<script>
element.addEventListener('nomeEvento', manipulador, opcoes);
element.removeEventListener('nomeEvento', manipulador);
</script>

<button id="btn">Teste</button>
<script>
const btn = document.getElementById('btn');

function manipulador() { console.log('Dispara apenas uma vez'); }
btn.addEventListener('click', manipulador);
btn.removeEventListener('click', manipulador);  // Removido com sucesso

btn.addEventListener('click', function() { console.log('Anônima'); });
btn.removeEventListener('click', function() { console.log('Anônima'); });  // Remoção falha!
</script>

Tipos Comuns de Eventos

Objeto de Evento

Manipuladores de eventos recebem um parâmetro de objeto de evento, geralmente chamado event ou abreviado como e.

Exemplo: Contador de Cliques em Botão

<button id="counter">Clicado 0 vezes</button>

<script>
const btn = document.getElementById('counter');
let count = 0;

btn.addEventListener('click', function(e) {
  count++;
  btn.textContent = 'Clicado ' + count + ' vezes';
  console.log('Tipo do evento:', e.type);
  console.log('Elemento alvo:', e.target.tagName);
});
</script>

Exemplo: Detecção de Teclado

<p>Pressione qualquer tecla para ver as informações</p>
<div id="info" style="padding: 10px; border: 1px solid #ccc; min-height: 30px;"></div>

<script>
const info = document.getElementById('info');

document.addEventListener('keydown', function(e) {
  info.innerHTML = 'Tecla: <b>' + e.key + '</b> | KeyCode: ' + e.keyCode + ' | Ctrl: ' + e.ctrlKey + ' | Shift: ' + e.shiftKey;
});
</script>

Exemplo: Interceptação de Formulário

<form id="myForm">
  <input type="text" id="name" placeholder="Digite o nome" required>
  <button type="submit">Enviar</button>
</form>
<p id="result"></p>

<script>
const form = document.getElementById('myForm');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  result.textContent = 'Olá, ' + name + '! O formulário foi interceptado, não enviado de fato.';
});
</script>

Exemplo: Delegação de Eventos

<ul id="menu">
  <li>Início</li>
  <li>Sobre</li>
  <li>Contato</li>
  <li>Ajuda</li>
</ul>
<p id="selected"></p>

<script>
const menu = document.getElementById('menu');
const selected = document.getElementById('selected');

menu.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    selected.textContent = 'Você selecionou: ' + e.target.textContent;
  }
});
</script>

Propagação e Captura de Eventos

A propagação de eventos do DOM tem três fases:

1. Fase de captura: O evento viaja de window até o elemento alvo
2. Fase alvo: O evento alcança o elemento que realmente disparou
3. Fase de propagação: O evento sobe do elemento alvo de volta para window

Por padrão, addEventListener dispara durante a fase de propagação. Defina o terceiro parâmetro como true para disparar durante a fase de captura.

     window
       ↓ captura
    document
       ↓
      body
       ↓
   elemento alvo ← fase alvo
       ↑ propagação
      body
       ↑
    document
       ↑
     window

📖 Resumo

1. Entre os três métodos de vinculação, addEventListener é o único recomendado — suporta múltiplos listeners, é removível, e controla a fase de propagação.
2. removeEventListener requer a mesma referência de função; funções anônimas não podem ser removidas.
3. Propriedades principais do objeto de evento e: target (quem disparou), type (qual evento), preventDefault() (prevenir comportamento padrão), stopPropagation() (parar propagação).
4. change vs input: o primeiro dispara no blur, o segundo dispara em tempo real.
5. A propagação de eventos torna a "delegação de eventos" possível — ouvir no pai, tratar filhos com e.target.
6. DOMContentLoaded dispara antes de load, adequado para inicialização do DOM.

❓ Perguntas Frequentes

P: Qual a diferença entre e.target e e.currentTarget? R: e.target é o elemento que realmente disparou o evento (o que você clicou), e.currentTarget é o elemento que está executando o manipulador (o que tem o listener). Na delegação de eventos eles são diferentes; na vinculação direta são iguais.

P: Por que a página atualiza após o envio do formulário? R: O comportamento padrão do evento submit do <form> é enviar e atualizar a página. Chame e.preventDefault() para impedir, depois trate os dados com JS.

P: onclick e addEventListener('click') podem ser usados juntos? R: Sim, mas a atribuição de onclick sobrescreve funções previamente vinculadas via onclick, enquanto addEventListener não. Misturar pode ser confuso — fique com addEventListener para tranquilidade.

📝 Atividades

1. Básico: Crie um botão e use addEventListener para vincular um evento click. Cada clique aumenta a largura do botão em 10px.
2. Intermediário: Implemente um instrumento musical — ouça eventos keydown. Quando A/S/D/F/G forem pressionados, exiba nomes de notas diferentes (Do/Re/Mi/Fa/Sol) na página.
3. Desafio: Use delegação de eventos para implementar um menu dinâmico — uma lista ul com um botão "Adicionar Item". Itens li adicionados recentemente também devem ser destacados quando clicados (sem precisar vincular eventos a novos li individualmente).
4. Bônus: Implemente uma busca em tempo real com evento input — conforme você digita no campo de input, a lista abaixo só mostra itens contendo o texto digitado.