키보드 이벤트 ?
사용자가 키보드를 작동했을 때 발생하는 이벤트
윈도우 단축키나 게임을 만들 때, 숫자 계산할 때 숫자나 방향키 등의 키보드 입력 이벤트를 지원한다.
UX를 개선할 수 있다.
| keydown | 사용자가 눌렀을 때 실행/ 눌린 키의 코드 제공/ 키보드를 누르고 있을 때 한번만 실행 |
| keyup | 사용자가 키를 눌렀다가 뗄 때 실행/ 눌려져있던 키가 놓아졌을 때 |
| keypress | 사용자가 눌렀던 키의 문자가 입력 되었을 때/ 키보드 버튼을 누르는 순간/ 키보드를 누르고 있을 때 계속 실행 |
Ctrl, Alt, Shift 키 등은 keydown에선 작동하지만 keypress에선 작동하지 않는다.
예전엔 keypress라는 이벤트도 사용되었지만 현재는 deprecated되어 권장되지 않는다.
addEventListner 사용
document.addEventListener("keydown", (e) =>
console.log(e));키보드 이벤트는 DOM에서 window나 document나 element에서 발생할 수 있다.
예로 document에서 발생하는 keydown 이벤트를 처리하려면 위와 같이 이벤트 처리를 위한
콜백함수를 설정해주면 된다.
키보드 이벤트 객체
눌리거나 놓아진 키에 다양한 정보가 담긴다.
key 속성엔 key값이, code 속성엔 code 값이 shiftKey 속성엔 shift키가 함께 눌렸는지의 여부가 저장된다.
키보드의 1키를 눌렀을 때 이벤트 핸들러 함수에 아래와 같은 키보드 이벤트 객체가 담긴 것을 볼 수 있다.
{
key: "1",
code: "key1",
shiftKey: false,
// 생략
}
키보드 이벤트 사용 예시
//js파일
document.querySelector('.textarea').addEventListener('keydown', () => {
console.log('키가 눌러졌습니다.');
});
document.querySelector('.textarea').addEventListener('keypress', () => {
console.log('문자가 입력되었습니다.');
});
document.querySelector('.textarea').addEventListener('keyup', () => {
console.log('키 눌림이 해제되었습니다.');
});
키보드이벤트와 캔버스를 활용하여 움직이는 이미지와 2d 컨텐츠 게임을 만들 수 있다.
<body>
<canvas id="game-canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("game-canvas")
const ctx = canvas.getContext("2d")
</script>
</body>
움직이려면 키보드 방향키에 이벤트를 넣어야 한다.
addEventListener로 지정 후 정지된 그림을 렌더링하여 게임을 초당 10프레임으로 다시 그리도록 지정하여 구현한다.
setInterval을 사용하면 ms마다 지정된 함수를 반복적 실행이 된다.
window.onload = () => {
document.addEventListener("keydown", keyPush)
setInterval(game, 1000 / 10)
}
x,y축 포지션 변수를 만들어 방향키를 누를 때마다 한 칸씩 이동하는 함수를 만들 수 있다.
function keyPush(e) {
switch(e.keyCode) {
case 37:
positionX += -1;
positionY += 0;
break;
case 38:
positionX += 0;
positionY += -1;
break;
case 39:
positionX += 1;
positionY += 0;
break;
case 40:
positionX += 0;
positionY += 1;
break;
}
}e.keyCode에 누른 상태의 코드가 있다.
왼쪽 방향키부터 시계 방향으로 왼쪽은37, 위는 38, 오른쪽은 39, 아래는 40으로 되어 있다.
switch문을 이용하여 각 방향키 코드에 이벤트를 부여한다.
왼쪽이면 x방향으로 한 칸 뒤로 가야하니 -1, 오른쪽 방향은 1 으로 움직이는 방향을 구현한다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤 애니메이션 사라졌다가 나타나기 적용하기 (0) | 2023.03.19 |
|---|---|
| [JavaScript] 고급 문법 Promise (0) | 2023.03.17 |
| [JavaScript] DOM이벤트 - change이벤트(onchange) 사용법 (0) | 2023.03.10 |
| [JavaScript] 정규 표현식 2)정규식 특수 문자, 자주 쓰는 정규식 정리 (0) | 2023.03.09 |
| [JavaScript] 자바스크립트 정규 표현식 1)정규식 함수 (0) | 2023.03.09 |
댓글