본문 바로가기

제이쿼리

[제이쿼리] - 이벤트 등록 메서드 / 이벤트 종류

제이쿼리 이벤트 등록 메서드

 

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

이벤트 핸들러(이벤트명 뒤에 나오는 함수를 뜻한다)는 이벤트가 발생했을 때 실행되는 코드를 의미한다. 

 

이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 <단독 이벤트 등록 메서드>와,

여러 이벤트를 등록할 수 있는 <그룹 이벤트 등록 메서드> 가 있다. 

 

[ 이벤트의 기본형 ]

$('이벤트 대상').이벤트명(function(){
      자바스크립트 코드;
})

[ 이벤트 종류 ]

 

1. 로딩 이벤트

- load( )

: 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후, 이벤트 발생

(이미지에 들어있는 src까지 다 불러오면 실행한다.)

 

ex) $('window').load(function(){})

 

- ☆ready( )

: 지정한 html 문서 객체의 로딩이 완료된 후 이벤트가 실행된다. load보다 조금 더 빠르다. 

(일단 태그만 다 불러오면 실행한다)

 

- error( )

: 이벤트 대상 요소에서 오류가 발생하면 이벤트가 실행

페이지 로드가 안될때, 데이터를 불러오지 못할 때 사용

 

 

2. 마우스 이벤트

 

- ☆clik( ) 

: 선택한 요소를 클릭하면 이벤트가 실행

 

- dblclik( )

: 선택한 요소를 더블클릭하면 이벤트가 실행

 

- mouseout( )

: 선택한 영역에서 마우스가 벗어났을 때 이벤트가 실행

 

- mouseover( )

: 선택한 영역에 마우스가 들어오면 이벤트가 실행

 

- hover( )

: 선택한 요소에 마우스가 올라갔을 때와 벗어났을 때 각각 이벤트가 실행

 

- mousedown( )

: 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생

 

- mouseup( )

: 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생

 

- mouseenter( )

: 선택한 요소 범위에 마우스 포인트를 올렸을 때 이벤트가 발생

 

- mouseleave( )

: 선택한 요소 범위에서 마우스가 떠났을 때 이벤트가 발생

 

-   mousemove( )

: 선택한 요소 범위에서 마우스가 움직일 때마다 이벤트가 발생

마우스 포인터에 따라다니는 거 만들고 싶을 때, 어떤 섹션에 갔을 때 마우스포인터 모양이 바뀌어야할 때 등 쓴다. 

 

☆ scroll( )

: 가로 세로 스크롤바가 움직일 때마다 이벤트가 발생한다. 

 

 

 

3. 포커스(폼) 이벤트

- focus( )

: 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 강제로 포커스를 생성한다. 

 

- focusin( )

: 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생

 

- focusout( )

: 선택한 요소에서 다른 요소로 포커스가 이동되면 이벤트가 발생한다. 

 

☆ blur( )

: 선택한 요소에 포커스가 바른 요소로 이동되었을 때 이벤트를 발생하거나 강제로 포커스를 없앨 때 사용한다. 

 

change( )

: 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 

그리고 이벤트를 강제로 발생 시킬 때 사용한다. 

 

 

4. 키보드 이벤트

- keypress( )

: 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 

그리고 문자 키를 제외한 키의 코드 값을 반환한다. 

 

- keydown( )

: 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 

키보드의 모든 키의 코드값을 반환한다. 

 

- keyup( )
: 키보드의 키를 눌렀다가 뗐을 때 이벤트가 발생.