04. 이벤트 등록 메서드와 이벤트 객체

1. 이벤트 등록 메서드

이벤트란, 사이트에서 방문자가 취하는 모든 행위를 말하며

이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. 

 

이벤트 등록 방식에는

1. 단독 이벤트 등록 메서드

2. 그룹 이벤트 등록 메서드

가 존재하는데

우선은 이벤트 등록 메서드의 종류를 보겠다.

 

1-1) 로딩 이벤트

load( )	선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생
ready( )	지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생
error( )	이벤트 대상 요소에서 오류 발생시 이벤트 발생

1-2) 마우스 이벤트

click( )	선택한 요소 클릭 시 이벤트 발생
dblclick( )	선택한 요소를 연속해서 클릭 시 이벤트 발생
mouseout( )	선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트 발생 (하위 요소의 영향 받음)
mouseover( )	선택한 요소에서 마우스 포인터 올렸을 때 이벤트 발생
hover( )	선택한 요소에서 마우스 포인터 올렸을 때와 벗어났을 때 각각 이벤트 발생
mousedown( )	선택한 요소에서 마우스 버튼 눌렀을 때 이벤트 발생
mouseup( )	선택한 요소에서 마우스 버튼 눌렀다 떼었을 때 이벤트 발생
mouseenter( )	선택한 요소 범위에 마우스 포인터 올렸을 때 이벤트 발생
mouseleave( )	선택한 요소 범위에서 마우스 포인터가 떠났을 때 이벤트 발생
mousemove( )	선택한 요소 범위에서 마우스 포인터 움직였을 때 이벤트 발생
scroll( )	가로, 세로 스크롤바를 움직일 때마다 이벤트 발생

1-3) 포커스 이벤트

focus( )	선택한 요소에 포커스 생성되었을 시 이벤트 발생 또는 선택한 요소에 강제로 포커스 생성
focusin( )	선택한 요소에 포커스가 생성되었을 때 이벤트 발생
focusout( )	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
blur( )	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생 또는 선택한 요소의 포커스 강제로 없앰
change( )	이벤트 대상인 입력 요소의 값 변경 + 포커스 이동 시 이벤트 발생 강제로 change 이벤트 발생시킬 때 사용

1-4) 키보드 이벤트

keyPress( )	선택한 요소에서 키보드 눌렀을 때 이벤트 발생 (문자키 제외한 키의 코드값을 반환)
keydown( )	선택한 요소에서 키보드 눌렀을 때 이벤트 발생 (키보드 모든 키의 코드값 반환)
keyup( )	선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생

 

1-2) 이벤트 등록 방식

이벤트 등록 방식에는

대상에 한 가지 동작에 대한 이벤트만 등록하는

단독 이벤트 등록 메서드와

대상에 한 가지 이상의 동작 이벤트를 등록하는

그룹 이벤트 등록 메서드가 존재한다.

 

1-2. 1) 단독 이벤트 등록 메서드

단독 이벤트 등록 메서드의 기본형은 다음과 같다.

사용자가 버튼을 클릭하면 환영 메시지를 경고 창에 띄우게끔 하고 싶다면

다음과 같은 코드를 작성하면 된다.

1-2. 2) 그룹 이벤트 등록 메서드

그룹 이벤트 등록 메서드의 기본형은 다음과 같다.

그룹 이벤트 등록 메서드에 대한 예를 들어보겠다.

사용자가 버튼에 마우스 포인터를 올리거나

키보드를 사용하여 버튼에 포커스를 맞추면

환영 메시지가 콘솔 패널에 출력되도록 해보겠다.

 

2. 이벤트 객체

이벤트 객체는

사용자가 이벤트를 발생시킬 때마다

이벤트 핸들러의 매개변수에 생성된다.

이벤트 객체에는 이벤트 타입에 맞는 

다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.

 

이벤트 객체를 생성하기 위한 기본형은 다음과 같다.

이벤트 객체의 종류는 다음과 같다.

2-1) 마우스 이벤트

clientX	마우스 포인터의 X 좌표값 반환(스크롤 이동 거리 무시)
clientY	마우스 포인터의 Y 좌표값 반환(스크롤 이동 거리 무시)
pageX	스크롤 X축의 이동한 거리를 계산, 마우스 포인터의 X좌표값을 반환
pageY	스크롤 Y축의 이동한 거리를 계산, 마우스 포인터의 Y좌표값을 반환
screenX	화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환
screenY	화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환
layerX	position을 적용한 요소를 기준으로 마우스 포인터의 X좌표값을 반환
layerY	position을 적용한 요소를 기준으로 마우스 포인터의 Y좌표값을 반환
button

2-2) 키보드 이벤트

ketCode	키보드의 아스키 코드값을 반환
altKey	이벤트 발생시 Alt키가 눌렸으면 true, 아니면 false 반환
ctrlKey	이벤트 발생시 Ctrl키가 눌렸으면 true, 아니면 false 반환
shiftKey	이벤트 발생시 Shift키가 눌렸으면 true, 아니면 false 반환

2-3) 전체 이벤트

target	이벤트가 전파된 마지막 요소를 가리킴
cancelBubble	이벤트의 전파를 차단(기본값은 false, true로 설정시 전파가 차단됨)
stopPropagation( )	이벤트의 전파를 차단
preventDefault( )	기본 이벤트를 차단

 

 

*이벤트를 발생시키는 메서드의 기본형이 조금씩 다 다르나

이정도로 정리해두도록 하겠다.

(Do it, 자바스크립트  + 제이쿼리 입문 p. 246~ p. 277 참조)