[JS] keydown, keypress, keyup

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    this.closeImageInfo();
  }
});

다른 이벤트에 비해 조금은 생소한 키보드 이벤트 세 가지 keydown, keypress, keyup에 대해 정리.

각 이벤트의 정의

• keydown: 키보드를 누를 때 실행. 단 한번만 실행
• keypress: 키보드를 누를 때 실행. 키를 누르고 있을 때 계속 실행
• keyup: 누른 키에서 손을 뗄 때 실행.

keydown vs keypress

• keydown 이벤트는 사용자가 키를 누르는 모든 경우를 감지하고, keypress 이벤트는 문자 및 숫자 키를 누를 때의 입력만을 감지

키보드 동작 순서

• keydown > keypress > keyup