이전 글 ( jQuery : 이벤트 연결 ) 에서 이벤트 연결 과 해제 방법 , 이벤트 를 발생 시킨 요소 ( element ) 정보 를 가지 고 있 는 이벤트 객체 등 을 살펴보 았 습니다 . 이벤트 를 조금 경험 했으므로 , 이번 에 는 이벤트 종류 와 사용 방법 을 주제 로 조금 더 깊 게 들어가 봅니다 . 이벤트 종류 는 네 가지 입니다 . 
 입력 양식 이벤트 
 1 . 마우스 이벤트 
 마우스 움직임 에 따라 발생 하 는 알림 을 처리 할 경우 마우스 이벤트 로 처리 합니다 . 다음 과 같 은 마우스 이벤트 가 있 습니다 . 
 click : 마우스 를 클릭 할 때 발생 
 dbclick : 마우스 를 더블 클릭 할 때 발생 
 mousedown : 마우스 버튼 을 누를 때 발생 
 mouseup : 마우스 버튼 을 뗄 때 발생 
 mouseenter : 마우스 가 요소 의 경계 외부 에서 내부 로 이동 할 때 발생 
 mouseleave : 마우스 가 요소 의 경계 내부 에서 외부 로 이동 할 때 발생 
 mousemove : 마우스 를 움직일 때 발생 
 mouseout : 마우스 가 요소 를 벗어날 때 발생 
 mouseover : 마우스 를 요소 안 에 들어올 때 발생 
 마우스 는 이벤트 에 해당 하 는 함수 는 이름 만 봐도 알 수 있 습니다 . 그 중 에서 mouseover 와 mouseenter 차이 와 mouseleave 와 mouseout 이벤트 의 차이 를 살펴봅니다 . 
 위 소스 는 큰 박스 와 작 은 박스 에 각각 마우스 를 차례 로 올려 놓 았 을 경우 mouseover 와 mouseenter 의 차이 를 보여 주 는 예제 입니다 . 소스 에서 큰 박스 에 mouseover 와 mouseenter 이벤트 를 설정 하 였 습니다 . 그리고 마우스 를 큰 박스 와 작 은 박스 에 차례 로 올려 놓 으면 mouseover 이벤트 는 두 번 발생 합니다 . 큰 박스 에서 한 번 , 작 은 박스 에서 한 번 , 모두 두 번 발생 합니다 . 이벤트 버블 링 을 적용 하 기 때문 입니다 . 반면 mouseenter 이벤트 는 한 번 밖에 적용 되 지 않 습니다 . 이벤트 버블 링 을 막 고자 한다면 mouseover 보 다는 mouseenter 를 사용 합니다 . 
 위 그림 1 을 보 면 mouseover 는 두 번 발생 하 고 mouseenter 는 한 번 발생 함 을 알 수 있 습니다 . mouseout 과 mouselevave 도 버블 링 을 적용 하 는 차이 입니다 . mouseout 는 이벤트 버블 링 을 적용 하 는 반면 mouseleave 는 적용 하 지 않 습니다 . 
 2 . 키보드 이벤트 
 사용 자 키보드 입력 에 따라 발생 하 는 알림 은 키보드 이벤트 로 처리 합니다 . 키보드 이벤트 는 세 가지 입니다 . 
 keydown : 키 를 누를 때 발생 
 keypress : 글자 를 입력 할 때 발생 
 keyup : 키 로부터 손가락 을 뗄 때 발생 
 동적 으로 글자 수 를 세 어 주 는 예제 로 키보드 이벤트 를 살펴봅니다 . " 글자 세기 " 예제 를 만들 때 keypress 이벤트 를 사용 합니다 . 하 지만 keypress 이벤트 는 한글 입력 에 사용 할 수 없 습니다 . 한글 입력 에 는 keyup 이벤트 를 사용 합니다 . 
 이 예제 는 keyup 이벤트 가 생길 때 마다 글자 를 세 어 줍니다 . 글자 를 입력 할 때 keydown 이벤트 가 아닌 keyup 이벤트 를 사용 하 는 이유 는 무엇 일까요 ? 키보드 이벤트 가 발생 하 는 순서 에 그 답 이 있 습니다 . 키보드 이벤트 발생 순서 는 다음 과 같 습니다 . 
 사용자 가 키보드 를 누른다 . keydown 이벤트 가 발생 한다 . 글자 가 입력 된다 . keypress 이벤트 가 발생 한다 . 사용자 가 키보드 에서 손 을 뗀다 . keyup 이벤트 가 발생 한다 . 
 이런 순서 때문 에 keydown 이벤트 발생 후 아직 글자 는 입력 되 지 않 은 상태 입니다 . 그래서 입력 한 글자 수 를 표시 해야 하 므로 글자 가 입력 되 고 난 다음 인 keyup 이벤트 를 사용 해야 합니다 . 
 그림 2 를 보 면 글자 가 입력 될 때 마다 동적 으로 글자 를 세 는 것 을 알 수 있 습니다 . 
 3 . 윈도우 이벤트 
 윈도우 이벤트 는 윈도우 객체 만 사용 할 수 있 는 이벤트 가 아니 라 , 윈도우 객체 와 document 객체 이외 에 img 태그 등 이 사용 하 는 이벤트 입니다 . 윈도우 이벤트 는 여섯 가지 입니다 . 
 read : 문서 객체 가 준비 되 었 을 때 발생 
 load : 윈도우 를 불러들일 때 발생 
 unload : 윈도우 를 닫 을 때 발생 
 resize : 윈도우 의 크기 를 바뀔 때 발생 
 scroll : 윈도우 를 스크롤 할 때 발생 
 error : 에러 가 있 을 때 발생 
 SNS 에서 자주 볼 수 있 는 무한 스크롤 기능 을 예 로 들 어 , 윈도우 이벤트 를 살펴봅니다 . 무한 스크롤 은 페이지 가 끝 까지 내려갔 을 때 또 다른 리스트 를 로딩 시켜 사용 자 에게 계속 해서 페이지 의 내용 을 보여 주 는 방법 입니다 . 
 위 소스 는 scroll 이 끝 까지 내려가 면 다시 10 줄 을 추가 하 는 방식 으로 무한 스크롤 을 합니다 . document 객체 의 height 속성 은 문서 전체 의 높이 를 의미 합니다 . 스크롤 이 끝 까지 내려가 면 window 객체 의 scrollTop 속성 과 height 속성 을 합한 값 이 document 객체 의 높이 와 같 아 집니다 . 이 를 이용 하 여 스크롤 이 페이지 의 끝 까지 도달 했 다는 사실 을 알 수 있 습니다 . 그리고 scroll 이 끝 까지 도달 하 여 개발자 가 원 하 는 작업 을 수행 하 면 됩니다 . 위 소스 결과 는 소스 를 직접 돌려 보 고 눈 으로 확인 하 는 것 이 더 좋 으므로 생략 하 도록 하 겠 습니다 . 
 4 . 입력 양식 이벤트 
 입력 양식 에서 발생 하 는 알림 을 처리 할 경우 입력 양식 이벤트 를 사용 합니다 . 입력 양식 이벤트 는 여섯 가지 입니다 . 
 change : 입력 양식 의 내용 을 변경 할 때 발생 
 focus : 입력 양식 에 초점 을 맞추 면 발생 
 focusin : 입력 양식 에 초점 이 맞춰 지 기 바로 전 에 발생 
 blur : 입력 양식 에 초점 이 사라질 때 발생 
 select : 입력 양식 을 선택 할 때 발생 ( type 이 text , textarea 제외 ) 
 submit : submit 버튼 을 누를 때 발생 
 checkbox 와 radio 인 input 태그 의 상태 를 변경 하 는 예제 를 change 이벤트 를 통해 알아보 도록 하 겠 습니다 . 
 change 이벤트 를 통해 All 체크 박스 를 선택 하 거나 해제 하 였을 때 change 이벤트 가 발생 합니다 . 그리고 change 함수 가 실행 되 면 아래 체크 박스 들 이 체크 되 어 있 으면 해제 하 고 , 체크 되 어 있 지 않 으면 다시 체크 하 는 예제 입니다 . 
 소스 를 실행 하 시 면 그림 3 과 같이 확인 할 수 있 습니다 . 
 이번 글 에서 는 이벤트 사용법 을 살펴보 았 습니다 . 이벤트 사용 방법 은 생각 보다 어렵 지 않 고 , 이벤트 의 동작 방식 에 대한 기본 이해 만 있 다면 쉽 게 사용 할 수 있 습니다 . 이벤트 사용 방법 에 대해 궁금 하 신 분 들 께 많 은 도움 이 되 었 으면 하 는 바램 입니다 . 참고 로 다른 글 에서 live 함수 를 살펴보 았 는데 live 함수 는 jQuery 1 . 7 버전 부터 는 없 어 졌 습니다 . 그 대신 on ( ) 을 사용 하 여 해당 기능 을 구현 할 수 있 습니다 . 감사 합니다 . 
 윤인성 저 , 모던 웹 을 위한 JavaScript jQuery 입문 
 베 어 바이 볼트 & 예후 다 저 , jQuery in Action 
 웹 문서 - http : / / api . jquery . com / category / events /