본문 바로가기

Tech/JavaScript

[jQuery] 키보드 이벤트(Keydown, Keypress, Keyup)

1. 이벤트 발생순서

키보드 입력 -→ keydown -→ 글자 입력 -→ keypress -→ 키보드 뗌 -→ keyup

2. 동작방식

2-1). keydown

  1. 키보드에서 key를 눌렀을 경우 실행
  2. 대소문자의 key value를 구별안함

2-2). keypress

  1. 키보드에서 key를 눌렀을 경우 실행
  2. 대소문자의 key value를 구별함
  3. 영어, 숫자 등 화면상에 입력되는 key가 눌렸을 때 실행
    • 즉, 방향키 등과 같은 특수 key는 인식안됨 ( enter 제외)

2-3). keyup

  1. 키보드에서 손을 뗀 경우 한 번 실행
  2. 대소문자의 key value를 구별안함
3. 주의사항
  • 대부분의 브라우저는 event 객체를 파라미터로 전달하지 않아도 참조가능
  • Firefox의 경우는 event 객체를 파라미터로 전달해줘야 참조가능
// IE, Chrome
$("#inputText").on('keydown', function() {
    var keyCode = event.keyCode;
});

// Firefox
$("#inputText").on('keydown', function(evt) {
    var keyCode = evt.which ? evt.which : event.keyCode;
});

'Tech > JavaScript' 카테고리의 다른 글

[jQuery] attr(), prop() 비교 및 차이  (0) 2019.05.05
[jQuery] 키보드 이벤트(Keydown, Keypress, Keyup)  (0) 2019.03.10

태그