keycode, code

스페이스바를 누르면 비디오가 멈추게 하는 기능을 바닐라 JS로 구현해보고자 했다.

구현하는 방법이 다 비슷해서 정리해보았다.

 

우선 keydown 동작에 반응하도록 짰다. event type에 대해서는 아래를 참고.

https://developer.mozilla.org/en-US/docs/Web/Events

 

document.addEventListener("keydown", handleSpaceBarDown);

 

 

단순히 key를 이용하는 방법

 

눌린 값이 출력됩니다.

function handleSpaceBarDown(e) {
  if (e.key === " ") {
    handlePlayButtonClick();
  }
}

 

keyCode를 사용하는 방법

 

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

 

deprecated라서 없어진다고 하니 이 방법은 지양하자.

function handleSpaceBarDown(e) {
  if (e.keyCode === 32) {
    handlePlayButtonClick();
  }
}

 

code를 이용하는 방법

 

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

event.code에 무슨 키를 눌렀는지 보여준다.

function handleSpaceBarDown(e) {
  if (e.code === "Space") {
    handlePlayButtonClick();
  }
}