키보드 : keydown 및 keyup (step 27)

KHW·2021년 2월 15일

목록 보기

9/39

Event 관련 key, code, keyCode

event.key : 현재 키보드에서 존재하는 알파벳과 숫자 값

event.code : 키보드의 위치에 따라 달라지는 코드
1. 문자 키 => "Key": "KeyA", "KeyB"등 (NOT keyA)
2. 숫자 키 => "Digit": "Digit0", "Digit1"등 (NOT digit0)
3. 특수 키 => "Enter", "Backspace", "Tab"등

event.keyCode : 숫자의 형태로 적용

event.code의 특징

event.code 키를 누를 때 정확히 지정
ex) e.key의 경우 왼쪽 shift와 오른쪽 shift 전부 Shift로 출력되지만 e.code는 ShiftRight, ShiftLeft로 정확히 나온다.

언제 어떤걸 사용해야하냐

event.code 같은 경우는 외국마다 키보드 레이아웃이 다른 경우에 같은 위치가 서로다른 알파벳으로 처리되어질 수 있다.

따라서

정확한 핫키(단축키 ex) F12, CTRL, ALT, Caps Lock)의 경우는 좀 더 정확히 구분할 수 있는 event.code를 사용해야 하고 그외의 숫자나 문자값에는 키보드에 명시되어있는 것과 같은 event.key를 사용해야한다.

keypress 이벤트

이 기능은 더 이상 권장되지 않습니다. 일부 브라우저는 여전히이를 지원할 수 있지만 관련 웹 표준에서 이미 제거되었거나 삭제되는 중이거나 호환성 목적으로 만 유지 될 수 있습니다. (from MDN)

기본동작 취소

keydown 의 이벤트를 prevent 기본동작을 막을 수 있으나 alt+f4와 같은 예외가 존재한다.

210825 추가본

이벤트는 keypress keyup keydown 3가지 존재

keypress는 한글을 반응하지못한다. e.code==='Enter를 통해 가독성은 좋지만 한글을 못쓰는 영향은 크다.

keyup과 keydown의 차이는 결과에 있다.

keyup

const log = document.querySelector('input'); 

document.addEventListener ( 'keyup', logKey); 

function logKey (e) { 
  console.log(e.target.value); 
}

keydown

  const log = document.querySelector('input'); 

document.addEventListener ( 'keydown', logKey); 

function logKey (e) { 
  console.log(e.target.value); 
}