jQuery 마우스(mouse), 키보드(keyboard) 이벤트 제어

앞서 포스팅한 클릭 이벤트 제어와 마찬가지로 마우스와 키보드의 동작에 대해 학습법 포스팅. 코드 작성법은 거의 유사하기 때문에 사용 빈도 높은 이벤트와 동작 방법에 대해 알아보자.

1. http://jquery.com 접속

2. API Documentation 클릭

3. 마우스 내리면 이벤트에 대한 문서들 나온다. Mouse Events 클릭

4. .mouseenter() 클릭

샘플 코드 맨 아래에 데모창에 마우스를 움직이면 동작법의 차이에 대해 파악할 수 있다.
mouseover / mouseout : 해당 공간 내에서 움직여도 숫자가 증가됨.  이벤트 인식이 중복된다.
mouseenter / mouseleave : 해당 공간에 한번 들어가면 나올때까지 한번만 인식됨. 이벤트 인식을 정확히 한다.

mouseover / mouseout을 개선시킨 녀석이 mouseenter / mouseleave라 생각하고 mouseenter 사용하도록 하자!

5. 3번 단계로 돌아가 Keyboard Events 클릭 후 keyup 클릭

keyup은 키보드 입력 후 떼는 순간 그 값에 대한 정보를 가져오는 키워드이다. 
keyCode : 아스키코드 값
key : 입력값
ctrlKey, altKey 등의 true/false 여부를 통해 눌려있었는지 아닌지도 파악할 수 있다. 다음의 코드를 바탕으로
티켓의 갯수에 따라 각기 다른 가격을 보이도록 브라우저를 만들 수 있다.
키보드 이벤트에 대해 다음 포스팅에서 정리