[JavaScript] keydown, keyup, keypress 함수의 기능 및 차이점

 

[JavaScript] keydown, keyup, keypress 함수의 기능 및 차이점

keydown, keyup, 그리고 keypress는 웹 개발에서 키보드 이벤트를 처리할 때 사용되는 이벤트 타입입니다.

이 이벤트들은 각각의 키보드 동작에 반응하여 특정 작업을 수행하도록 도와줍니다.

이들 이벤트의 차이점은 다음과 같습니다

1. keydown 이벤트

• 설명: 사용자가 키보드를 누르는 순간 발생합니다.
• 트리거 시점: 키가 눌린 직후.
• 특징:
  • 모든 키에 대해 발생합니다(알파벳, 숫자, 특수 문자, 화살표 키, 기능 키 등).
  • 키가 계속 눌려있으면 반복적으로 발생합니다.
  • key 값(키의 실제 값)과 code 값(키보드의 물리적 위치)을 확인할 수 있습니다.

2. keyup 이벤트

• 설명: 사용자가 눌린 키를 놓는 순간 발생합니다.
• 트리거 시점: 키가 눌렸다가 떨어지는 순간.
• 특징:
  • 모든 키에 대해 발생합니다.
  • 키를 누르고 있는 동안 반복되지 않습니다. 키를 놓는 순간 단 한 번 발생합니다.
  • key 값과 code 값을 확인할 수 있습니다.

3. keypress 이벤트

• 설명: 사용자가 키보드를 누를 때 발생하는데, 주로 문자 키에 반응합니다.
• 트리거 시점: 키가 눌린 직후(문자가 입력되는 시점).
• 특징:
  • 문자 입력 키에 대해서만 발생합니다(알파벳, 숫자, 특수 문자 등). 화살표 키, 기능 키 등에는 반응하지 않습니다.
  • 눌린 키가 반복될 때에도 발생합니다.
  • key 값만 제공하며, code 값은 제공되지 않습니다.
  • keypress 이벤트는 이제 권장되지 않으며, 최신 웹 개발에서는 keydown과 keyup을 사용하는 것이 좋습니다.

요약

• keydown: 키가 눌린 순간 발생. 모든 키에 대해 발생. 반복 발생.
• keyup: 키가 떨어진 순간 발생. 모든 키에 대해 발생. 반복 없음.
• keypress: 키가 눌린 순간 발생. 문자 키에 대해서만 발생. 반복 발생. (권장되지 않음)

예제 코드

javascript코드 복사
document.addEventListener('keydown', function(event) {
  console.log('Key down:', event.key, event.code);
});

document.addEventListener('keyup', function(event) {
  console.log('Key up:', event.key, event.code);
});

document.addEventListener('keypress', function(event) {
  console.log('Key press:', event.key);
});