자바 스크립트에서 키 누름을 감지하는 가장 간단한 방법

자바 스크립트에서 키 누름을 감지하는 가장 간단한 방법

---

나는 자바 스크립트로 된 게임에 대한 아이디어를 가지고 있고 (나는 EaselJS로 만들 것이다) 키 누름을 감지해야 할 것이다. 인터넷을 둘러 본 후 많은 제안 (window.onkeypress 사용, jQuery 사용 등)을 보았지만 거의 모든 옵션에 대해 반론이 있습니다. 너희들은 무엇을 제안합니까? 이 작업을 위해 jQuery를 사용하는 것은 쉽지만 실제로 해당 라이브러리에 대한 경험이 없으며 특히 자바 스크립트의 베테랑이 아니므로 피하고 싶습니다. jQuery가 최선의 선택이라면 누군가가 이것을 수행하는 방법에 대한 좋은 예 (설명 포함)를 줄 수 있습니까?

많은 질문을 받았지만 명확한 답을 찾을 수 없었습니다. 미리 감사드립니다!

---

일반 자바 스크립트를 사용하면 가장 간단한 방법은 다음과 같습니다.

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 및 onKeyDown

무엇을 사용할지 제안하는 것에 관해서는 프레임 워크를 배우고 있다면 jQuery를 사용하는 것이 좋습니다. 동시에 Javascript의 구문, 방법, 기능 및 DOM과 상호 작용하는 방법을 배워야한다고 말하고 싶습니다. 작동 방식과 무슨 일이 일어나고 있는지 이해했다면 jQuery로 작업하는 것이 더 편해질 것입니다. 나에게 jQuery는 일을 더 일관되고 더 간결하게 만듭니다. 결국 Javascript이며 언어를 래핑합니다.

jQuery가 매우 유용한 또 다른 예는 AJAX입니다. 브라우저는 AJAX 요청이 처리되는 방식과 일치하지 않으므로 jQuery는이를 추상화하므로 걱정할 필요가 없습니다.

결정하는 데 도움이 될만한 사항은 다음과 같습니다.

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

---

KEYPRESS
(키 입력)

바닐라:

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
)

데모

---

사용 event.key하고 현대적인 JS!

더 이상 번호 코드가 없습니다. 당신이 사용할 수있는 "Enter", "ArrowLeft", "r", 또는 키 이름을 직접 코드를 훨씬 더 읽기 만들기.

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

Mozilla 문서

지원되는 브라우저

---

이를 처리하는 몇 가지 방법이 있습니다. 바닐라 자바 ​​스크립트는 아주 멋지게 할 수 있습니다.

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

참조 URL : https://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript