Maneira mais simples de detectar keypresses no javascript

Eu tenho uma idéia para um jogo em javascript (eu vou fazer isso com EaselJS) e vou ter que detectar keypresses. Depois de dar uma olhada na internet, vi muitas sugestões (use window.onkeypress, use jQuery, etc.), mas para quase todas as opções há um contra-argumento. O que vocês sugerem? Usar o jQuery para isso parece bastante fácil, mas eu praticamente não tenho experiência com essa biblioteca (e eu não sou particularmente um veterano no javascript), então eu prefiro evitar isso. Se jQuery é a melhor opção, alguém pode dar um bom exemplo (com explicação seria incrível) de como fazer isso?

Eu acho que isso é perguntado muito, mas não consegui encontrar respostas claras. Desde já, obrigado!

Com JavaScript simples, o mais simples é:

document.onkeypress = function (e) { e = e || window.event; // use e.keyCode }; 

Mas com isso, você só pode ligar um manipulador para o evento.

Além disso, você pode usar o seguinte para poder vincular vários manipuladores ao mesmo evento:

 addEvent(document, "keypress", function (e) { e = e || window.event; // use e.keyCode }); function addEvent(element, eventName, callback) { if (element.addEventListener) { element.addEventListener(eventName, callback, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, callback); } else { element["on" + eventName] = callback; } } 

Em ambos os casos, keyCode não é consistente nos navegadores, portanto, há mais para verificar e descobrir. Observe o e = e || window.event e = e || window.event – esse é um problema normal com o Internet Explorer, colocando o evento em window.event em vez de passá-lo para o retorno de chamada.

Referências:

Com jQuery:

 $(document).on("keypress", function (e) { // use e.which }); 

Referência:

Além de jQuery ser uma biblioteca “grande”, jQuery realmente ajuda com inconsistências entre navegadores, especialmente com events de janela … e isso não pode ser negado. Espero que seja óbvio que o código jQuery que forneci para o seu exemplo seja muito mais elegante e mais curto, e ainda assim realize o que você quer de uma maneira consistente. Você deve ser capaz de confiar que e (o evento) e.which (o código chave, para saber qual tecla foi pressionada) são precisos. Em JavaScript simples, é um pouco mais difícil de saber, a menos que você faça tudo o que a biblioteca jQuery faz internamente.

Observe que há um evento keydown diferente do keypress de keypress . Você pode aprender mais sobre eles aqui: onKeyPress vs. onKeyUp e onKeyDown

Quanto a sugerir o que usar, eu definitivamente sugeriria usar o jQuery se você estiver interessado em aprender o framework. Ao mesmo tempo, eu diria que você deve aprender a syntax, methods, resources e como interagir com o DOM. Depois de entender como funciona e o que está acontecendo, você deve se sentir mais confortável trabalhando com o jQuery. Para mim, o jQuery torna as coisas mais consistentes e mais concisas. No final, é o Javascript e envolve o idioma.

Outro exemplo de jQuery sendo muito útil é com o AJAX. Os navegadores são inconsistentes com o modo como as solicitações do AJAX são tratadas, então o jQuery abstrai isso para que você não tenha que se preocupar.

Aqui está algo que pode ajudar a decidir:

PRESSIONE O BOTÃO
(tecla Enter)

Baunilha:

 document.addEventListener("keypress", function(event) { if (event.keyCode == 13) { alert('hi.') } }) 

Taquigrafia baunilha :

 this.addEventListener('keypress', (event) => { if (event.keyCode == 13) { alert('hi.') } }) 

jQuery:

 $(this).on('keypress', function(event) { if (event.keyCode == 13) { alert('hi.') } }) 

jQuery classical:

 $(this).keypress(function(event) { if (event.keyCode == 13) { alert('hi.') } }) 

taquigrafia do jQuery:

 $(this).keypress((e) => { if (e.which == 13) { alert('hi.') } }) 

Ainda mais curto:

 $(this).keypress(e=> e.which==13? alert('hi.'):null ) 

demonstração

Existem algumas maneiras de lidar com isso; Baunilha JavaScript pode fazer isso muito bem:

 function code(e) { e = e || window.event; return(e.keyCode || e.which); } window.onload = function(){ document.onkeypress = function(e){ var key = code(e); // do something with key }; }; 

Ou uma maneira mais estruturada de lidar com isso:

 (function(d){ var modern = (d.addEventListener), event = function(obj, evt, fn){ if(modern) { obj.addEventListener(evt, fn, false); } else { obj.attachEvent("on" + evt, fn); } }, code = function(e){ e = e || window.event; return(e.keyCode || e.which); }, init = function(){ event(d, "keypress", function(e){ var key = code(e); // do stuff with key here }); }; if(modern) { d.addEventListener("DOMContentLoaded", init, false); } else { d.attachEvent("onreadystatechange", function(){ if(d.readyState === "complete") { init(); } }); } })(document); 

Use event.key e moderno JS!

Não há mais códigos numéricos . Você pode usar "Enter" , "ArrowLeft" , "r" ou qualquer nome de tecla diretamente, tornando seu código muito mais legível.

 document.addEventListener("keypress", function onEvent(event) { if (event.key === "ArrowLeft") { // Move Left } else if (event.key === "Enter") { // Open Menu... } }); 

Mozilla Docs

Navegadores Suportados

Intereting Posts