2020/10/30 - TIL(Keyboard Event)

오늘 했던 일

• 키보드 이벤트(KeyboardEvent)

 

키보드 이벤트

자바스크립트는 addEventListner를 통하여 사용자가 키보드의 키를 누르거나 놓을 때 이벤트를 발생시킬 수 있습니다. 누를 때는 keydown, 놓을 때는 keyup 타입을 발생시킵니다.

 

키보드 이벤트는 window, document 또는 특정 요소(element)에서 모두 발생시킬 수 있고, 이벤트를 처리하기 위한 콜백 함수를 전달해야 합니다.

 

window.addEventListener('keydown', (e) => console.log(e));

 

 위 코드를 콘솔에 작성하고 키 1을 눌러보면.

 

 

1이라는 키에 대한 다양한 정보가 담겨 있는데, key라는 속성에는 누른 키 값이, keyCode속성에는 해당 키의 아스키코드 값이, shiftKey속성에는 쉬프트키가 눌린 여부를 나타냅니다.

 

이렇게 이벤트 핸들러 함수에 넘어온 다양한 정보를 이용하여 처리를 할 수가 있는데, 대표적으로 웹 도구에서 단축키를 제공하거나, 웹 게임에서 키 조작을 할 때 사용할 수 있습니다.

 

 

키보드 아스키코드값