들어가며

키보드 액션 작업을 하면서 이벤트값으로 “ArrowLeft, ArrowRight” 등의 다소 낯선 값들을 보게 되었습니다. 그동안 event.KeyCode로 충분히 활용할 수 있어 다른 옵션들은 살펴보지 않았었습니다. 이번에 키보드, 마우스 이벤트를 뜯어 보면서 도움이 될만한 옵션을 소개하고자 합니다.

키보드 이벤트

키보드 event

• code

  • type: string

  • 값

    키보드 키	값
    방향 (상, 하, 좌, 우 순)	'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
    숫자 (0, 1, 2, 3 순)	'Digit0', 'Digit1', 'Digit2', 'Digit3'
    그 외 (enter, space bar, tab 순)	'Enter', 'Space', 'Tab'

event.code보다 좀 더 값이 명확한 event.key도 있습니다.

• key

  • type: string

  • 값

    키보드 키	값
    방향 (상, 하, 좌, 우 순)	'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
    숫자 (0, 1, 2, 3 순)	'0', '1', '2', '3'
    그 외 (enter, space bar, tab 순)	'Enter', 'ㅤ', 'Tab'

  • 활용

window.addEventListener('keydown', (event) => {
  if(event.code !== 'ArrowUp') {
	  console.log('상향 방향키를 눌러 주세요');
    return;
  }
  if(event.key === 'ArrowUp') {
	  console.log('상향 방향키를 입력하였습니다');
  }
});

window.addEventListener('keydown', (event) => {
  if(event.key === ' ') {
	  console.log('Space를 입력하였습니다');
  }
});

event.code와 event.key는 같거나 비슷한 성향으로 값을 가지고 있는데 확연히 차이가 나는 값을 가진 옵션이 있습니다. 그것은 이중 키 입력입니다. 예를 들어 특수 문자와 같이 두 개 이상의 키 입력을 해야 하는 경우입니다.

활용할 때도 두 가지 값의 조합으로 입력키 확인할 수 있습니다.

• 활용

window.addEventListener('keydown', (event) => {
  if(event.code === 'ShiftLeft' && event.code === 'Digit8') {
	  console.log('*를 입력하였습니다');
  }
});

// '*를 입력하였습니다'

그런데 값을 ‘ShiftLeft’로 지정해 놓으면 양쪽 shift 키 입력이 제한적이고 OR 연산로 ‘ShiftRight’의 조건 값을 추가하면 코드가 늘어집니다. 이렇듯 키보드에 중복으로 존재하여 사용되는 alt, ctrl, shift를 하나로 확인할 수 있는 이벤트가 있습니다. 단축키를 만들 때 유용하게 활용할 수 있습니다.

• altKey, ctrlKey, shiftKey

  • type: boolen
  • 활용

window.addEventListener('keydown', (event) => {
  if(shiftKey && event.code === 'Digit8') {
	  console.log('*를 입력하였습니다');
  }
});

// '*를 입력하였습니다'

마우스 이벤트

마우스 이벤트에서 눈에 띄는 것을 좌표 값을 나타내는 이벤트 입니다. 마우스 event

• pageX, pageY

  • type: number
  • feature: 스크롤(브라우저) 전체 기준의 좌표 값

• clientX, clientX

  • type: number
  • feature: 화면(현재 창) 기준의 좌표 값
  • 활용: pageX, pageY/ clientX, clientX

마치며

글을 작성하면서 키와 값이 뚜렷한 이벤트를 사용하면 코드의 직관성이 향상되겠다고 생각하였는데 아마 keyCode의 값을 때마다 찾았던 기억이 나서였던 것 같습니다. 또한 키 조합을 활용하면 재미있는 무언가를 만들 수도 있을 것 같습니다 :D

읽어 주셔서 고맙습니다. - 끄읕 -