Desafios de Eventos em JavaScript

O que são eventos em JavaScript?

Eventos são ações que acontecem na página, como um clique, digitar no teclado, rolar a tela ou enviar um formulário.
Com JavaScript, você pode reagir a esses eventos para tornar a página interativa.
Exemplo: quando você clica em um botão e algo muda na tela, provavelmente é um evento que está sendo tratado pelo JavaScript!

Principais tipos de eventos:
click (clique), dblclick (duplo clique), mouseover (mouse sobre), mouseout (mouse saiu), keydown (tecla pressionada), input (texto digitado), submit (formulário enviado), entre muitos outros!

Abaixo você encontra diversos desafios para praticar. Clique em Ver exemplo para ver as respostas comentadas!

Desafios

Clique Simples:
Ao clicar em um botão, altere o texto de um <p> para “Você clicou!”.

<button id="btn">Clique aqui</button>
<p id="texto"></p>
<script>
document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("texto").textContent = "Você clicou!";
});
</script>

Clique Duplo:
Ao dar duplo clique em um botão, o botão deve desaparecer.

<button id="btn">Dê duplo clique</button>
<script>
document.getElementById("btn").addEventListener("dblclick", function() {
    this.style.display = "none";
});
</script>

Mouse Over:
Ao passar o mouse sobre uma div, altere a cor de fundo dela para azul.

<div id="area" style="width:100px;height:100px;background:gray"></div>
<script>
document.getElementById("area").addEventListener("mouseover", function() {
    this.style.background = "blue";
});
</script>

Mouse Out:
Quando o mouse sair de cima de uma imagem, troque a imagem para outra.

<img id="img" src="imagem1.jpg" width="100">
<script>
document.getElementById("img").addEventListener("mouseout", function() {
    this.src = "imagem2.jpg";
});
</script>

Tecla Pressionada:
Quando o usuário digitar no input, exiba em tempo real o que ele está digitando em um <span>.

<input id="campo" type="text">
<span id="resultado"></span>
<script>
document.getElementById("campo").addEventListener("input", function() {
    document.getElementById("resultado").textContent = this.value;
});
</script>

Enter Pressionado:
Quando o usuário apertar ENTER em um campo de texto, exiba um alert com o valor digitado.

<input id="entrada" type="text">
<script>
document.getElementById("entrada").addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        alert(this.value);
    }
});
</script>

Formulário enviado:
Intercepte o envio de um formulário, impeça o envio padrão e mostre o nome digitado em um alert.

<form id="form">
  <input type="text" id="nome" name="nome" placeholder="Digite seu nome">
  <button type="submit">Enviar</button>
</form>
<script>
document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();
    alert("Nome: " + document.getElementById("nome").value);
});
</script>

Prevent Default em Link:
Quando clicar em um link, impeça que ele navegue para outro site e mostre uma mensagem “Navegação bloqueada”.

<a id="link" href="https://www.google.com">Ir para Google</a>
<script>
document.getElementById("link").addEventListener("click", function(e) {
    e.preventDefault();
    alert("Navegação bloqueada");
});
</script>

Mudar cor com Tecla:
Quando o usuário apertar a tecla “b”, o fundo da página fica preto. Se apertar “w”, volta a branco.

<script>
document.addEventListener("keydown", function(e) {
    if (e.key === "b") document.body.style.background = "black";
    if (e.key === "w") document.body.style.background = "white";
});
</script>

Contador de Cliques:
Conte quantas vezes um botão foi clicado e exiba no próprio botão.

<button id="btn">Clique (0)</button>
<script>
let contador = 0;
document.getElementById("btn").addEventListener("click", function() {
    contador++;
    this.textContent = `Clique (${contador})`;
});
</script>

Arrastar e Soltar:
Arraste um quadrado de uma div para outra usando eventos nativos de Drag and Drop.

<div id="origem" style="width:100px;height:100px;background:orange;" draggable="true"></div>
<div id="destino" style="width:100px;height:100px;background:lightgray;margin-top:20px"></div>
<script>
const origem = document.getElementById("origem");
const destino = document.getElementById("destino");
origem.addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("text", "arrastado");
});
destino.addEventListener("dragover", function(e) {
    e.preventDefault();
});
destino.addEventListener("drop", function(e) {
    e.preventDefault();
    destino.appendChild(origem);
});
</script>

Evento Delegado:
Em uma lista de <li>, ao clicar em qualquer item, marque ele como selecionado (adicione classe), usando delegação de eventos.

<ul id="lista">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
document.getElementById("lista").addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        for (let li of this.children) li.classList.remove("selecionado");
        e.target.classList.add("selecionado");
    }
});
</script>
<style>
.selecionado { background: yellow; }
</style>

Evento Customizado:
Crie um evento customizado chamado “usuarioLogado” e, quando ele for disparado, exiba uma mensagem no console.

<script>
document.addEventListener("usuarioLogado", function() {
    console.log("Usuário logado!");
});
// Disparando o evento:
const evento = new Event("usuarioLogado");
document.dispatchEvent(evento);
</script>

Remover Listener:
Ao clicar num botão, um evento de clique deve ser removido, não funcionando mais.

<button id="btn">Clique para desativar</button>
<script>
function clique() {
    alert("Ainda ativo!");
    document.getElementById("btn").removeEventListener("click", clique);
}
document.getElementById("btn").addEventListener("click", clique);
</script>

Scroll na Página:
Ao dar scroll na página, mostre no topo a quantidade de pixels rolados.

<div id="topo" style="position:fixed;top:0;left:0;width:100%;background:#eee"></div>
<div style="height:2000px"></div>
<script>
window.addEventListener("scroll", function() {
    document.getElementById("topo").textContent = 
      "Pixels rolados: " + window.scrollY;
});
</script>

Dica: altere e teste os códigos!
Praticar eventos é a melhor forma de aprender JavaScript de verdade.