[제이쿼리(jQuery)] lesson 4

이번 장에서는 이벤트에 대해 조금더 상세히 다루도록 하겠다.

* 마우스 이벤트의 종류

마우스 이벤트	설명
click	마우스를 클릭했을 때 발생
dblclick	마우스를 더블 클릭했을 때 발생
mouseenter	마우스가 해당요소 안으로 진입했을 때 발생
mouseleave	마우스가 해당요소 밖으로 나갔을 때 발생
mousedown	마우스의 왼쪽키가 눌린 경우
mouseup	마우스의 눌렸던 왼쪽키가 풀린 경우
hover	mouseenter 와 mouseleave 이벤트의 묶음

syntax>

$(셀렉터).이벤트액션(실행할 function)

mouseenter 와 mouseleave 이벤트는 다음 그림과 같다.

해당 태그 안으로 진입할 경우 mouseenter 이벤트가 밖으로 나갈 경우는 mouserleave 이벤트가 발생한다. 이 두가지 동작을 하나로 합친 이벤트가 hover 이다

$("table").mouserenter(function(){

alert("테이블에 들어옴");

});

$("table").mouserleave(function(){

alert("테이블에서 나감");

});

▼

hover 로 변경

syntax>

$(셀렉터).이벤트액션(마우스 enter 이벤트 function , 마우스 leave 이벤트 function)

$("table").hover(function(){

alert("테이블에 들어옴");

    },

    function(){

    alert("테이블에서 나감");

});

* 키보드 이벤트의 종류

키보드 이벤트	설명
keypress	키입력에 대한 이벤트, keydown,keyup 과 다른 것은 쉬프트, 탭 등의 키는 이벤트를 발생시키지 않는다. 또한 한글에 대해서 이벤트를 발생하지 않는다.
keydown	키가 눌렸을 때 이벤트
keyup	키의 눌림이 풀렸을 때 이벤트

* 폼 이벤트의 종류

폼 이벤트	설명
submit	서버의 전송을 위한 이벤트
change	내용이 변경되었을 때 이벤트
focus	해당 요소가 포커스되었을 때 발생
focusin	해당 요소가 포커스되었을 때 발생하지만 focus 와의 차이는 focus 이벤트보다 먼저 발생한다.( focusin은 focus에 진입되는 순간, focus 완료되는 순간 focus 이벤트)
blur	해당 요소의 포커스가 빠져나갔을 때 발생
focusout	해당 요소의 포커스가 빠져나갔을 때 발생하지만 blur 와의 차이는 blur 이벤트보다 먼저 발생한다.

* document/window 이벤트의 종류

document/window 이벤트	설명
load	로딩이 완료되었을 때의 이벤트
resize	크기가 변경되었을 때의 이벤트
scroll	스크롤이 변경되었을 때의 이벤트
unload	종료시 발생하는 이벤트

---

아래에서 발생되는 간단한 발생이벤트 및 순서를 테스트해보도록 하자.
(그려진 큰박스/작은박에 마우스 이동 또는 클릭을 해보자. 또는 그 하단의 textbox 에 focusing 을 해보도록 하자)

* 이벤트 테스트

큰박스

작은박스

발생이벤트

* 이벤트 테스트에 바인딩한 이벤트

태그	이벤트
큰박스/작은박스	mouseenter mouseleave click dblclick
텍스트박스	focus blur focusin focusout keydown keypress keyup