[jQuery] 이벤트 개념과 마우스 이벤트 종류 (hover, mouseenter, mouseleaver, mouseover, mouseout)

https://comymel.tistory.com/8

[jQuery] window 선택자 / 브라우저 창 크기 구하기

△이전글 보러가기

 

 

이벤트란 무엇인가?

웹페이지는 사용자와 여러 상호작용을 함으로써 구현된다.

사용자는 웹페이지를 이용하면서 마우스나 키보드를 이용하여 여러 동작을 하게 된다.

여기서 동작이란 웹페이지에 있는 어떤 요소 안으로 들어가게끔 마우스를 움직이거나 클릭하거나,

키보드로 내용을 입력하는 등의 행위를 말한다.

이 동작들에 브라우저가 반응해서 이벤트를 발생시키고 어떠한 결과를 보여준다.

즉, 이벤트는 브라우저 안에서 사용자의 동작들로 인해 나타나는 사건을 말하는 것이다.

 

<이벤트 명령 형식>

$(선택자).이벤트명(function(){

    내용

});

 

 

 

마우스 이벤트 종류

1. 마우스 움직임 감지 이벤트

1) mouseenter	마우스가 해당 요소(태그) 영역 안에 들어갔을 때 실행
2) mouseleave	마우스가 해당 요소 영역 안에서 나왔을 때 실행
3) mouseover	마우스가 해당 요소 영역 안에 들어갔을 때 실행
4) mouseout	마우스가 해당 요소 영역 안에서 나왔을 때 실행
5) hover	마우스가 해당 요소 영역 안에 들어갔을 때 실행

- mouseenter, mouseover, hover : 마우스가 요소 안으로 들어가는 움직임을 감지

- mouseleave, mouseout : 마우스가 요소 밖으로 나오는 움직임을 감지

 

 

1) mouseenter

ex)

$('#box').css({     width: 500,     height: 500,     backgroundColor: 'crimson', }); // 가로세로 크기 500, 배경색 빨간색인 박스. (이하 예시에서 생략) $('#box').mouseenter(function(){     $('#box').css({         backgroundColor: 'dodgerblue',     }); }); // 박스 안으로 마우스가 들어가면 박스 배경색이 파란색으로 바뀜. // 잘못된 예 /* $('#box').mouseenter(function(){     backgroundColor: 'dodgerblue', }); */ // css속성을 바로 입력하면 안됨, mouse 이벤트 명령 안에서 다시 선택자를 잡아주고 css명령 안에서 작성하여야 함.

 

 

 

2) mouseleave

ex)

$('#box').mouseleave(function(){     $('#box').css({         backgroundColor: 'gold',     }); }); // 박스 밖으로 마우스가 나오면 박스 배경색이 노란색으로 바뀜. // 마우스가 박스 바깥에 있는 상태라면 영역 안에 들어갔다가 나올 때 색깔이 바뀜.

 

 

 

3) mouseover

ex)

$('#box').mouseover(function(){     $('#box').css({         backgroundColor: 'green',     }); }); // 박스 안으로 마우스가 들어가면 박스 배경색이 초록색으로 바뀜. (mouseenter와 결과 동일)

 

 

 

4) mouseout

ex)

$('#box').mouseout(function(){     $('#box').css({         backgroundColor: 'purple',     }); }); // 박스 밖으로 마우스가 나오면 박스 배경색이 보라색으로 바뀜. (mouseleave와 결과 동일)

 

 

<mouseenter/mouseleave와 mouseover/mouseout의 차이점>

 

- mouseenter/mouseleave :

선택자로 지정한 요소에서만 마우스 움직임을 감지한다.

- mouseover/mouseout :

선택자로 지정한 요소와 그 요소의 자식 요소에서의 마우스 움직임을 모두 감지한다.

 

 

 

5) hover

hover 명령을 한번만 주면 마우스가 요소 안에 들어갔을 때,

최초 1회만 실행되고 마우스가 요소 밖으로 나와도 이전 속성으로 돌아가지 않는다.

hover의 기본 명령틀은 콜백함수*를 이용하는 것이다.

콜백함수까지 다 작성해주어야 마우스가 요소 밖으로 나왔을 때의 효과도 줄 수 있다.

 

* 콜백함수 : function(){}

한 함수가 실행되고 난 후에, 실행하고 싶은 또 다른 명령을 삽입할 때 사용하는 함수

 

 

<css의 hover와 다른점>

마우스가 요소 밖으로 나왔을 때 css는 처음에 지정했던 속성으로 돌아가지만,

제이쿼리의 hover는 처음 지정한 속성과 다른 속성으로 변경하여 지정이 가능하다.

하지만 마우스가 요소 밖으로 나왔을 때 콜백함수로 적은 속성으로 바뀐 뒤에

처음에 지정했던 속성으로 다시 돌아가지는 않는다.

 

 

<hover 기본 명령 형식>

$(선택자).hover(function(){

    $(선택자).명령어({

        내용

    });

});

 

 

 

마우스 클릭이벤트에 관한 내용은 다음 포스팅에서...