웹 전반, 브라우저/Web API
keycode, code
DarrenKwonDev
2020. 7. 13. 20:39
스페이스바를 누르면 비디오가 멈추게 하는 기능을 바닐라 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();
}
}