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

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

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

43
easeljs html5 javascript jquery keyboard

4 ответов

С простым 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 вместо передачи его в функцию обратного вызова.

ссылки:

С библиотека jQuery:

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

ссылки:

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

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

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

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

вот что может помочь решить:

62

нажатие
(введите ключ)

Ванильное:

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

Ванильное стенографии:

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
)

демо

14

есть несколько способов справиться с этим; 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);
6

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

нет цифровых кодов

4