다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

jquery keyboard event

HTML 공부 2015. 3. 21. 06:40

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에 대해서 알아봤습니다. 수고하셨어요.

저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바