📖 키보드 이벤트
- 사용자가 키를 누르거나 놓을 때 발생한다.
- DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생한다.
- 키를 놓을 때는
keyup, 키를 누를 때는keydown타입의 이벤트가 발생한다.
keyup 예제
아래 코드는 키보드 이벤트를 구분하기 위한 비밀번호 유효성 체크 예제이다.
keyup 이벤트를 사용할 경우 키를 놓을 때마다 입력 값이 로그에 찍히는 것을 확인할 수 있다.
keydown 예제
keydown 이벤트는 keyup 이벤트와 다르게 키를 누를때마다 입력값이 로그에 찍히기 때문에 키를 누르는 동안의 입력값이 지속적으로 출력된다.
keycode
입력한 키에 대해 키코드로 이벤트 핸들링이 가능하다.
기존에 사용하던 keycode는 웹 표준에서 제거되었기 때문에key를 사용하는 것을 권장한다.
keycode 예제
ENTER
BACKSAPCE
위 예제를 보면 input박스에서 enter, backspace를 누를 때마다 로그가 찍히는 것을 확인할 수 있다.
