Самый простой способ обнаружить нажатия клавиш в javascript

Question

У меня есть идея для игры в javascript (я собираюсь сделать это с помощью EaselJS), и мне придется обнаруживать нажатия клавиш. После осмотра в Интернете я видел много предложений (используйте window.onkeypress, используйте jQuery и т. Д.), Но почти для каждого варианта есть контраргумент. Что вы предлагаете? Использование jQuery для этого звучит достаточно просто, но у меня практически нет опыта работы с этой библиотекой (и я не особенно ветеран в javascript), поэтому я бы предпочел избежать этого. Если jQuery - лучший вариант, может ли кто-нибудь дать хороший пример (с объяснением было бы замечательно) о том, как это сделать?

Я предполагаю, что этого много спрашивают, но я не мог найти четких ответов. Заранее спасибо!

Answer 1

С простой Javascript, самое простое:

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

Но с этим, вы можете связывать только один обработчик для события.

Кроме того, вы можете использовать следующие, чтобы иметь возможность потенциально связать несколько обработчиков к тому же событию:

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; 
    } 
} 

В любом случае, keyCode не соответствует во всех браузерах, поэтому есть больше, чтобы проверить и выяснить. Обратите внимание на e = e || window.event - это обычная проблема с Internet Explorer, помещая событие в window.event вместо передачи его в обратный вызов.

Ссылки:

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

С JQuery:

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

Ссылка:

• http://api.jquery.com/on/

Кроме JQuery быть «большой» библиотеки JQuery действительно помогает с несоответствиями между браузерами, особенно с оконными событиями ... и что не может быть отказано. Надеюсь, очевидно, что код jQuery, который я предоставил для вашего примера, намного более элегантен и короче, но выполняет то, что вы хотите, последовательно. Вы должны быть уверены, что e (событие) и e.which (код ключа, для того, чтобы узнать, какая клавиша была нажата) точны. В простом Javascript это немного сложно узнать, если вы не сделаете все, что внутренняя библиотека jQuery.

Замечания: keydown событие, отличное от keypress. Вы можете узнать о них подробнее здесь: onKeyPress Vs. onKeyUp and onKeyDown

Что касается предложения о том, что использовать, я бы определенно предложил использовать jQuery, если вы хотите изучить структуру. В то же время я бы сказал, что вам следует изучить синтаксис, методы, функции Javascript и способы взаимодействия с DOM. Как только вы поймете, как это работает и что происходит, вам должно быть удобнее работать с jQuery. Для меня jQuery делает вещи более последовательными и более краткими. В конце концов, это Javascript и обертывает язык.

Еще один пример использования jQuery с AJAX. Браузеры несовместимы с тем, как обрабатываются запросы AJAX, поэтому аннотации jQuery позволяют вам не беспокоиться.

Вот что-то, что могло бы помочь решить:

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

Answer 2

Есть несколько способов справиться с этим; Vanilla JavaScript может сделать это довольно красиво:

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 
    }; 
}; 

Или более структурированный способ его обработки:

(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); 

Answer 3

Keypress
(ввести ключ)

Vanilla:

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

Vanilla сокращенная:

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

JQuery:

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

JQuery классический:

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

JQuery стенографии:

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

Еще короче:

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

demo

Answer 4

Использование event.key и современный JS!

No number code больше. Вы можете использовать "Enter", "LeftArrow", "r" или любое ключевое имя, что делает ваш код более читаемым.

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

Mozilla Docs

Supported Browsers