e.which에 대한 고찰

게임 프로젝트를 인강 보면서 만들다가

e.which (event.which)에 대한 내용을 간략하게 적어보려 한다.

 

/* 코드를 작성하세요 */

const key = {
    keyDown : {},
    keyValue : {
        37: 'left',
        38: 'up',
        39: 'right',
        40: 'down'
    }
}

// 1. 윈도우 이벤트 = 키, 마우스등의 이벤트
// e.which = 키값 보기 위한 코드
const windowEvent = () => {
    window.addEventListener('keydown',(e) => {
        console.log(e.which);
        key.keyDown[key.keyValue[e.which]] = true;
        console.log(key.keyDown);
    });
    window.addEventListener('keyup',(e) => {
        key.keyDown[key.keyValue[e.which]] = false;
        console.log(key.keyDown);
    });
}

const init = () => {
    windowEvent();
}

// 모든 요소 로드후 게임 실행
window.onload = () => {
    init();
}

keydown (키를 눌렀을경우) 이벤트 시

console.log에 e.which가 있다.

e.which란 해당 키를 눌렀을 경우 번호가 어떤것인지 추출할수 있다.

하지만 mdn 에선 현재 권장하고 있지 않는듯 하나. 사용 하는덴 아직까진 문제가 없는듯하다.

현재는 e.key나 e.code 사용을 권장하고 있으나 

이것들은  번호를 추출하는게 아니고 왼쪽 화살표키라면

ArrowLeft 이런식으로 추출이 되는 방식이다.

 

 

참고링크

http://daplus.net/javascript-keycode%EC%99%80-which/

https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key

https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/code