이벤트

<키보드 관련 이벤트>

🔶 keyup,keydown, keypress 차이 알아보기

1. keyup: 키를 놓을 때 이벤트가 발생함.
2. keydown: 키를 누르면 이벤트가 발생함. 키를 누르고 있어도 단 한번만 실행됨.
3. keypress: 키를 누르면 이벤트가 발생함. (사용 권장되지 않음!)

🔶 키보드 이벤트 값을 받는 법

1. KeyboardEvent.keyCode ← 더이상 사용이 권장되지 않음!(mdn)

2. KeyboardEvent.key

• 반환값 : 문자열
• 한글도 인식됨.

3. KeyboardEvent.code

• 반환값 : KeyboardEvent: code values
• 한글이 인식되지 않는다.

코드예제

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

inputEl.addEventListener('keyup', (e) => {
  console.log(e.key); //   ㅁ     ㅌ    ㅂ    CapsLock   a    f     Shift     Shift
  console.log(e.code); // KeyA  KeyX  KeyQ  CapsLock  KeyA KeyF ShiftLeft ShiftRight
});

---