# 8.9 - Entendendo eventos no JavaScript

## 🧠 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!)

```javascript
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`)

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

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

***

#### 3. Usando HTML inline (menos indicado)

```html
<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

```javascript
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()`:

```javascript
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:

```javascript
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

```javascript
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:

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

#### ❌ Má prática:

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

#### ❌ Comportamento inesperado:

```javascript
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"                  |