0Pricing
JavaScript Academy · Aula

Eventos de teclado e mouse

Trate cliques, pressionamentos de teclas e eventos do ponteiro.

Eventos de teclado e mouse é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Famílias de eventos de entrada

Os eventos do mouse e do teclado permitem criar interações ricas. Cada família tem tipos e propriedades de eventos especializados.

O evento de clique

click é acionado ao pressionar e soltar o botão principal. Ele também é acionado pela ativação via teclado em botões e links, o que o torna acessível.

btn.addEventListener("click", () => {
  console.log("activated");
});

Duplo clique e menu de contexto

dblclick é acionado por um duplo clique, e contextmenu é acionado ao clicar com o botão direito (geralmente cancelado para exibir um menu personalizado).

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

Pressionar, soltar e mover o mouse

Eles oferecem um controle detalhado: pressionamento, soltura e movimento. São os blocos de construção para interações de arrastar.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

Entrada do mouse em comparação com passagem do mouse

mouseenter não borbulha nem considera os limites dos elementos filhos, enquanto mouseover borbulha e é acionado ao mover o mouse sobre elementos descendentes. Em geral, mouseenter é o que você deseja para a passagem do mouse.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Qual botão do mouse

A propriedade button informa qual botão foi acionado: 0 para o esquerdo, 1 para o do meio e 2 para o direito.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

Pressionar e soltar teclas

keydown é acionado quando uma tecla é pressionada (e se repete enquanto ela permanece pressionada); keyup é acionado ao soltá-la. keypress está obsoleto.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key é o valor lógico da tecla: um caractere como "a" ou um nome como "Enter", "Escape" ou "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code é a localização física da tecla (como "KeyA" ou "Space"), independentemente do layout do teclado. Use-o para os controles de jogos.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Atalhos de teclado

Combine sinalizadores modificadores com key para detectar atalhos e chame preventDefault para substituir o comportamento padrão do navegador.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

Repetição para teclas pressionadas

e.repeat é verdadeiro quando um keydown é acionado porque a tecla está sendo mantida pressionada, permitindo ignorar as repetições automáticas.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Verificação rápida

Escolha a propriedade independente do layout.

Resumo

Os eventos do mouse incluem click, dblclick, mousedown/mouseup/mousemove e os eventos adequados para passagem do mouse mouseenter/mouseleave; button identifica qual botão foi usado. Os eventos do teclado usam keydown/keyup, com e.key para o caractere ou nome, e.code para a tecla física e e.repeat para teclas mantidas pressionadas.

Perguntas Frequentes

A aula “Eventos de teclado e mouse” é grátis?

Sim — o texto completo de “Eventos de teclado e mouse” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Eventos de teclado e mouse”?

Trate cliques, pressionamentos de teclas e eventos do ponteiro. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Eventos de teclado e mouse”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Fundamentos do addEventListener
  2. O objeto de evento
  3. preventDefault e stopPropagation
  4. Eventos de teclado e mouse
← Voltar para JavaScript Academy