Como detectar esc com JavaScript (Tecla Escape)

Neste artigo você vai aprender a como detectar esc com JavaScript, ou seja, como monitorar um evento quando a tecla escape é pressionada

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Para verificar quando o usuário aperta esc, podemos criar um evento no document

Que vai checar todas as teclas que são pressionadas

Porém vamos buscar por uma key específica, todo evento tem uma propriedade chamada key

E a do esc se chama “Escape”, a busca pode ser feita por uma comparação if

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Veja um exemplo prático do que foi explicado acima:

document.onkeydown = function(e) {

  if(e.key === 'Escape') {
  	console.log("APERTOU ESC!")
  }

}

Agora sempre que o esc for pressionado você tem a possibilidade de executar alguma lógica

Que é o que você precisa fazer quando o usuário pressiona esta tecla, simples não é? 🙂

Há uma outra abordagem utilizando keyCode, mas este recurso provavelmente será descontinuado

Então tome cuidado ao utilizar a propriedade keyCode para checar o número do evento de esc, que é o 27

Conclusão

Neste artigo você aprendeu a como detectar esc com JavaScript

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Um bloco mostrando a mesma detecção usando addEventListener no lugar de document.onkeydown, explicando o PORQUÊ: com onkeydown você sobrescreve o handler e só pode ter um, com addEventListener você registra vários listeners sem um atropelar o outro. Mostrar o código:

document.addEventListener(‘keydown’, function(e) { if(e.key === ‘Escape’) { console.log(‘APERTOU ESC!’) } })

E explicar em linha curta que essa é a forma mais recomendada hoje, porque não conflita com outros eventos de teclado da página

Mostrar como parar de escutar o Escape com removeEventListener, explicando que pra isso a função precisa ter um nome (não pode ser anônima):

function detectaEsc(e) { if(e.key === ‘Escape’) { console.log(‘APERTOU ESC!’) } }

document.addEventListener(‘keydown’, detectaEsc) // pra remover depois: document.removeEventListener(‘keydown’, detectaEsc)

Antecipar o erro do leitor: se você passar uma arrow function direto no removeEventListener, não vai funcionar, porque é preciso ser a MESMA referência de função

Um exemplo aplicado, ligando a teoria a um uso real: usar a detecção do Escape pra fechar uma janela/modal na tela. Mostrar a ideia em código curto, por exemplo alternar uma classe ou display de um elemento quando e.key === ‘Escape’ for verdadeiro, e explicar em linha que esse é o uso mais comum na prática (fechar modal, menu ou popup)

Explicar em 2 ou 3 linhas a diferença: keydown dispara no momento em que a tecla é pressionada, keyup dispara quando ela é solta. Para reagir ao Escape geralmente se usa keydown (resposta imediata), mas a mesma checagem if(e.key === ‘Escape’) funciona nos dois