8.9 - Entendendo eventos no JavaScript

🧠 Entendendo Eventos no JavaScript: A Mágica por Trás das Interações ✨

🧠 Entendendo Eventos no JavaScript: A Mágica por Trás das Interações ✨

Agora que você já entende o que é o DOM, como navegar por ele e até como modificar elementos da página, chegou a hora de dar mais vida à sua interface! 🌟

Nesta etapa, vamos mergulhar mais fundo em um dos aspectos mais poderosos do JavaScript no navegador: os eventos.

Com eles, você será capaz de reagir a cliques, teclas, envios de formulários, rolagens e muito mais — e tudo isso usando técnicas modernas, seguras e organizadas. Vamos também entender os bastidores, boas práticas, erros comuns e como esses conceitos aparecem em outras linguagens.

Preparado para fazer sua página responder ao usuário? Vamos nessa! 🏃‍♀️💥

---

📌 O que são eventos?

Um evento é qualquer ação feita pelo usuário ou pelo navegador que pode ser "ouvida" pelo JavaScript.

Exemplos de eventos:

• Clique do mouse 🖱️

• Tecla pressionada ⌨️

• Página carregada 🌐

• Input alterado ✍️

• Formulário enviado 📤

• Mouse movido 🐭

• Tela redimensionada 🖥️

---

📚 Eventos são nativos do JS?

Sim! 🎉 O JavaScript já vem com centenas de eventos prontos para você usar — não precisa instalar nada. Esses eventos seguem padrões da Web API, reconhecidos pelos navegadores modernos.

---

📋 Lista de eventos mais comuns

Evento	Acontece quando...
click	O usuário clica em algo
input	Alguém digita ou altera um campo
submit	Um formulário é enviado
keydown / keyup	Uma tecla é pressionada/solta
mouseenter / mouseleave	Mouse entra/sai de um elemento
load	A página termina de carregar
scroll	A página é rolada
resize	A janela é redimensionada

👉 Cada elemento tem eventos específicos (ex: formulário tem submit, imagem tem load), mas muitos são universais.

---

🎧 Reagindo a eventos: as 3 formas principais

1. Usando addEventListener() ✅ (Recomendado!)

const botao = document.getElementById("meuBotao");
botao.addEventListener("click", function() {
  alert("Você clicou!");
});

🔹 Vantagens:

• Pode adicionar vários eventos ao mesmo elemento

• Mais organizado e reutilizável

• Padrão moderno e seguro

---

2. Usando propriedades de evento (ex: onclick)

botao.onclick = function() {
  alert("Cliquei!");
};

🔸 Desvantagem: substitui qualquer outra função que já estava no onclick

---

3. Usando HTML inline (menos indicado)

<button onclick="alert('Oi!')">Clique aqui</button>

🔸 Muito usado no passado, mas:

• Mistura HTML com lógica

• Difícil de manter em códigos grandes

---

🧼 Qual a melhor forma de usar eventos?

✅ Use addEventListener() sempre que puder! É a forma mais segura, moderna e fácil de organizar em projetos reais.

---

🔁 Múltiplas reações ao mesmo evento

botao.addEventListener("click", () => console.log("Função 1"));
botao.addEventListener("click", () => console.log("Função 2"));

🎉 Ambos são chamados! Só possível com addEventListener.

---

🧹 Removendo eventos

Usando removeEventListener():

function saudacao() {
  alert("Olá!");
}

botao.addEventListener("click", saudacao);
botao.removeEventListener("click", saudacao);

⚠️ A função precisa estar nomeada para ser removida!

---

📦 Objeto event: o que está acontecendo?

Todo evento leva consigo um objeto com informações úteis:

botao.addEventListener("click", function(event) {
  console.log(event); // mostra todos os detalhes do clique
});

Você pode acessar:

• event.target → quem foi clicado

• event.type → tipo do evento (ex: click)

• event.preventDefault() → impede a ação padrão (ex: envio de formulário)

---

⛔ Prevenindo comportamentos padrão

formulario.addEventListener("submit", function(event) {
  event.preventDefault(); // não envia o formulário
  console.log("Formulário bloqueado para validação!");
});

Muito útil para validar antes de enviar, ou evitar ações automáticas.

---

💡 Convenções e boas práticas

Boas práticas	Más práticas
Usar addEventListener()	Usar muito onclick no HTML
Remover listeners quando não precisar mais	Deixar listeners ativos pra sempre
Nomear funções para poder remover	Usar funções anônimas quando vai remover
Separar lógica do HTML	Misturar HTML com JS

---

🔍 Eventos em outras linguagens e ambientes

A ideia de eventos existe em muitas linguagens! Exemplos:

• Python (Tkinter): button.bind("<Button-1>", callback)

• Java (Swing): button.addActionListener(...)

• C# (WinForms): button.Click += new EventHandler(...)

🧠 Em todas elas, eventos conectam a interface com a lógica!

---

🧪 Exemplos práticos

✅ Bom exemplo:

botao.addEventListener("click", () => {
  console.log("Botão clicado!");
});

❌ Má prática:

<button onclick="console.log('oi')">Clique</button> <!-- difícil de manter -->

❌ Comportamento inesperado:

element.onclick = function() { ... };
element.onclick = function() { ... }; // Substitui o de cima!

---

🚨 Erros comuns para evitar

• Tentar remover listener com função anônima

• Usar onclick e depois addEventListener (pode causar conflito)

• Esquecer de usar event.preventDefault() quando necessário

• Adicionar múltiplos eventos sem saber → função duplicada!

---

📌 Recapitulando

Conceito	Explicação rápida
Evento	Ação do usuário (clique, tecla, scroll...)
EventListener	Função que "ouve" e reage
event object	Informações sobre o evento
preventDefault()	Impede a ação padrão
addEventListener	Melhor forma de usar eventos
removeEventListener	Remove a função "ouvinte"