# 8.8 - Tornando a página interativa

## 🎯 Tornando a página interativa

Até agora, você aprendeu a:

* Encontrar elementos na página ✅
* Mudar textos e estilos ✅
* Criar novos conteúdos ✅

Mas... e se você quiser que **algo aconteça quando a pessoa clica em um botão**? Ou quando passa o mouse por cima de um texto?

> Chegou a hora de dar vida à sua página com **eventos!** ⚡

***

### 🧠 O que são eventos?

Um **evento** é **qualquer coisa que acontece na página**:

* Alguém **clicou** 🖱️
* Digitou algo no teclado ⌨️
* Passou o mouse por cima 🐭
* A página carregou completamente 🌀

O JavaScript consegue **"ouvir" esses eventos** e **responder a eles** com uma ação.\
Isso é chamado de **interatividade**!

***

### 🖱️ O evento de clique

Vamos começar com o mais comum: o **clique**.

#### 👇 HTML

```html
<button id="meuBotao">Clique aqui!</button>
<p id="mensagem">Nada aconteceu ainda...</p>
```

#### 👉 JavaScript

```javascript
const botao = document.getElementById("meuBotao");
const mensagem = document.getElementById("mensagem");

botao.addEventListener("click", function() {
  mensagem.textContent = "Você clicou no botão! 🎉";
});
```

🔎 O que está acontecendo aqui:

* `addEventListener("click", ...)` → escuta o clique
* A função dentro dele é executada **quando o botão é clicado**
* Ela muda o texto do parágrafo com `textContent`

***

### 🧠 O que é `addEventListener` nesse caso ?

É uma função especial que diz:

> "Ei, JavaScript, fica de olho nesse botão.\
> Quando alguém clicar, execute essa ação!" 🕵️‍♀️

***

### 🧪 Outro exemplo divertido

```html
<button id="trocarCor">Trocar cor do fundo</button>
```

```javascript
const botao = document.getElementById("trocarCor");

botao.addEventListener("click", function() {
  document.body.style.backgroundColor = "lightblue";
});
```

✨ Resultado: Quando você clica no botão, o fundo da página muda de cor!

***

### ⚠️ Cuidado com nomes de eventos

Aqui estão alguns eventos comuns:

| Evento      | O que dispara           |
| ----------- | ----------------------- |
| `click`     | Clique do mouse         |
| `mouseover` | Mouse passando por cima |
| `keydown`   | Tecla pressionada       |
| `submit`    | Formulário enviado      |

> Em breve você vai explorar todos eles. Por enquanto, foque no `click`!

***

### ✅ Conclusão

Agora você já sabe como:

✅ Detectar eventos\
✅ Reagir a cliques\
✅ Criar páginas **que respondem aos usuários**!

> 💬 A sua página não é mais estática — agora ela **conversa com quem está usando**! 😄