jquery keyboard event

jquery keyboard event

■ 일반적으로 웹 화면에서 이루어지는 이벤트의 대부분은 마우스 이벤트로 처리할 수 있어서 사용하는 경우는 거의 없지만, 그래도 그냥 넘어갈 수 없어서 keyboard event에 대해서 간단하게 정리해볼까 합니다. 키보드 이벤트의 종류는 다음과 같습니다. 

1. keypress : 키보드의 키를 눌렀을 때 발생하는 이벤트인데요. 이벤트 처리 과정에서 변하는 경우가 많아서 잘 사용하지 않고, keyup이나 keydown을 사용합니다. 

2. keydown : 키보드가 눌렸을 때

3. keyup : 키가 떨어졌을 때

4. focusin : 입력 필드에 포커스가 들어왔을 때

5. focusout : 필드에서 포커스 해제

 

 

■ 이 중에서 foucs 관련 이벤트는 HTML5에서 지원이 되기 때문에 사용할 일이 거의 없을 겁니다. 그래도 이벤트 공부하면서 잠깐 살펴볼 필요는 있을 거 같아서 이렇게 정리하고 있습니다. 여기서는 keyup 이벤트를 이용해서 간단한 예제를 하나 만들어 볼 텐데요. keyboard event가 진행될 때 발생하는 부가 정보는 눌린 키의 종류와 발생 시간 등을 받아 올 수 있습니다. 예제에서는 숫자 1을 선택하면 네이버로 이동하고, 2를 누르면 다음으로 이동하는 예제를 만들어보겠습니다.

■ HTML에는 단순하게 두 개의 단락만 출력하고 있고요. 

■ 이벤트의 내용을 정리하자면, body 태그 안에서 일어나는 keyup 이벤트의 정보를 받아와서 아스키코드값으로 어떤 키가 눌렸는지 확인한 후 해당 웹 페이지로 이동하는 내용인데요. 1과 2를 제외한 다른 키를 눌렀을 때 실행되는 내용이 없어서 조금 불안한 내용이긴 해도, 여기서 중요한 건 keyup 이벤트의 which 속성을 이용하는 게 목적이니까 이해해주세요.^^

 이렇게 해서 JQuery의 keyboard event에 대해서 알아봤습니다. 수고하셨어요.