Aula 56 — Eventos de Mouse

Até agora, usamos principalmente o evento click. Mas o mouse oferece muitos outros eventos que permitem criar interações ricas e precisas.

Nesta aula, vamos entender os principais eventos de mouse, suas diferenças e quando usar cada um.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Conhecer os principais eventos de mouse
• Entender diferenças importantes entre eventos parecidos
• Usar eventos corretamente em interfaces reais
• Evitar bugs comuns relacionados ao mouse

O evento click

O click é disparado quando o usuário clica com o mouse em um elemento.

 
  const botao = document.getElementById("btn");
  botao.addEventListener("click", () => 
  {
    console.log("Botão clicado");
  });

 console.log("Botão clicado"); // Saída será exibida ao clicar no botão 

É o evento mais comum e mais usado.

mousedown e mouseup

Esses eventos detectam o pressionar e soltar do botão do mouse.

 
  botao.addEventListener("mousedown", () => 
  { 
    console.log("Mouse pressionado"); 
  });
    botao.addEventListener("mouseup", () => 
    {
      console.log("Mouse solto");
    });

 console.log("Mouse pressionado"); // Ao pressionar console.log("Mouse solto"); // Ao soltar 

Eles são úteis para:

• Arrastar elementos
• Efeitos de botão pressionado

mouseenter e mouseleave

Esses eventos detectam quando o mouse entra ou sai de um elemento.

 
  botao.addEventListener("mouseenter", () => 
  { 
    console.log("Mouse entrou"); });
    botao.addEventListener("mouseleave", () => 
    {
      console.log("Mouse saiu");
    });

 console.log("Mouse entrou"); // Quando entra no elemento console.log("Mouse saiu"); // Quando sai do elemento 

Importante:

• Não propagam para elementos filhos
• São ideais para efeitos de hover

mouseover e mouseout

Esses eventos são parecidos, mas se comportam de forma diferente.

 
  botao.addEventListener("mouseover", () => 
  { 
    console.log("Mouse sobre o elemento"); });
    botao.addEventListener("mouseout", () => 
    {
      console.log("Mouse saiu do elemento");
    });

Diferença importante:

• mouseover e mouseout disparam ao passar por filhos
• mouseenter e mouseleave não

mousemove

O mousemove é disparado sempre que o mouse se move sobre um elemento.

 
  document.addEventListener("mousemove", (event) => 
  { 
    console.log(event.clientX, event.clientY); 
  }); 

 
    console.log(event.clientX, event.clientY); // Saída será a posição do mouse na tela 

Use com cuidado:

• Dispara muitas vezes
• Pode afetar performance

wheel (mousewheel)

O evento wheel detecta o uso da roda do mouse.

 
      document.addEventListener("wheel", (event) =>
      { 
        console.log(event.deltaY); 
      }); 

 console.log(event.deltaY); // Valor positivo ou negativo dependendo da rolagem 

Muito usado em:

• Efeitos de scroll
• Zoom

Resumo rápido dos eventos de mouse

• click → clique
• mousedown / mouseup → pressionar/soltar
• mouseenter / mouseleave → entrar/sair
• mouseover / mouseout → entrar/sair com propagação
• mousemove → movimento
• wheel → rolagem

Na próxima aula, vamos estudar os eventos de teclado e criar interações baseadas em teclas.