event.key : 현재 키보드에서 존재하는 알파벳과 숫자 값
event.code : 키보드의 위치에 따라 달라지는 코드
1. 문자 키 => "Key": "KeyA", "KeyB"등 (NOT keyA)
2. 숫자 키 => "Digit": "Digit0", "Digit1"등 (NOT digit0)
3. 특수 키 => "Enter", "Backspace", "Tab"등
event.keyCode : 숫자의 형태로 적용
event.code
키를 누를 때 정확히 지정
ex) e.key의 경우 왼쪽 shift와 오른쪽 shift 전부Shift
로 출력되지만 e.code는ShiftRight
,ShiftLeft
로 정확히 나온다.
event.code
같은 경우는 외국마다 키보드 레이아웃이 다른 경우에 같은 위치가 서로다른 알파벳으로 처리되어질 수 있다.
따라서
정확한 핫키(단축키 ex) F12, CTRL, ALT, Caps Lock)의 경우는 좀 더 정확히 구분할 수 있는
event.code
를 사용해야 하고 그외의 숫자나 문자값에는 키보드에 명시되어있는 것과 같은event.key
를 사용해야한다.
이 기능은 더 이상 권장되지 않습니다. 일부 브라우저는 여전히이를 지원할 수 있지만 관련 웹 표준에서 이미 제거되었거나 삭제되는 중이거나 호환성 목적으로 만 유지 될 수 있습니다. (from MDN)
keydown 의 이벤트를 prevent 기본동작을 막을 수 있으나 alt+f4와 같은 예외가 존재한다.
keypress는 한글을 반응하지못한다.
e.code==='Enter
를 통해 가독성은 좋지만 한글을 못쓰는 영향은 크다.
const log = document.querySelector('input');
document.addEventListener ( 'keyup', logKey);
function logKey (e) {
console.log(e.target.value);
}
const log = document.querySelector('input');
document.addEventListener ( 'keydown', logKey);
function logKey (e) {
console.log(e.target.value);
}
abcd를 입력하면 keyup은 a , ab , abc , abcd 형태로 출력되고
abcd를 입력하면 keydown은 공백, a , ab, abc 형태로 출력된다.
즉, 안헷갈리려면 keyup이 낫고 keypress는 한글이 안되니
keyup을 쓰는것을 지향하자
현재 keyCode는 deprecated 되었으므로 e.key로 사용을 하자