[JQUERY] 마우스 관련 이벤트 - hover, mouseenter, mouseleave

JQuery의 마우스 관련 이벤트들을 정리해보려고 합니다.

그중에서 hover, mouseenter, mouseleave 이벤트를 알아보겠습니다.

 

---

 

1. 이벤트 정의 형태

$("셀렉터").이벤트이름(function() { 

    이벤트 처리 내용 

});

- 모든 이벤트는 함수 형태로 제공됩니다.

 

- 이벤트는 사용자가 어떤 행위를 할 때 발생됩니다.

- 예를 들어, 마우스로 클릭할 때입니다.

 

- 마우스 관련 이벤트는 html 태그 종류와 상관없이 모두 적용할 수 있습니다.

 

 

2. 마우스 관련 이벤트 (화면에 보이는 마우스 커서 관련)

 

이벤트 이름	설명
mouseenter	마우스 커서가 특정 부분에 올라간 상태
mouseleave	마우스 커서가 특정 부분을 벗어난 상태
hover	mouseenter + mouseleave : 커서가 올라갔다가 벗어난 상태

 

 

3. 예제 코드

 

* HTML 코드

<div id="listener">

    HELLO EVERYONE ^^

</div>

 

 

3.1. mouseenter

$(function() {

    $("#listener").mouseenter(function() {
    
        $("#listener").html("HOW ARE YOU?");
        
    });
    
});

- 마우스 커서를 갖다 대면 "HELLO EVERYONE ^^" → "HOW ARE YOU?"로 내용이 바뀝니다.

 

 

3.2. mouseleave

$(function() {

    $("#listener").mouseleave(function() {
    
        $("#listener").html("SEE YOU LATER");
        
    });
    
});

- 마우스 커서를 갖다댔다가 벗어나면 "HELLO EVERYONE ^^" → "SEE YOU LATER"로 내용이 바뀝니다.

 

 

3.3. hover

$(function() {

    $("#listener").hover(function() {
    
        alert("OKAY");
        
    });
    
});

- 마우스 커서를 갖다대면 "OKAY"라는 문구가 팝업으로 두 번 뜹니다.

 

- 팝업이 두 번 뜨는 이유는 hover는 mouseenter와 mouseleave를 포함하는 함수이기 때문입니다.

- 따라서 마우스 커서를 갖다 댄 경우와 뗀 경우 두 가지 상황을 분리하여 보여줘야 합니다.

 

 

$(function() {

    $("#listener").hover(
    
        function() {
            
            alert("OKAY");
            
        },
        
        function() {
        
            alert("BYE");
            
        }
        
    );
    
});

- 두 가지 경우를 나누어 작성한 코드입니다.

 

- 마우스 커서를 갖다댔을 경우 "OKAY"라는 문구가 뜨고, 떼면 "BYE"라는 문구가 팝업으로 뜹니다.

 

 

$(function() {

    $("#listener").hover(
    
        function() {
            
            alert("OKAY");
            
        },
        
        function() {
        
            return false;
            
        }
        
    );
    
});

- 만약 두 번째 function에 return false;를 넣어준다면, "OKAY" 팝업만 뜨게 됩니다.

 

 

3.4. mouseenter, mouseleave 함께 사용

$(function() {

    $("#listener").mouseenter(function() {
    
        $("#listener").html("HOW ARE YOU?");
        
    });

    $("#listener").mouseleave(function() {
    
        $("#listener").html("SEE YOU LATER");
        
    });
    
});

- mouseenter와 mouseleave를 함께 적용한 코드입니다.

 

- 처음 문구로 "HELLO EVERYONE ^^"이 보입니다.

- 위 문구에 마우스 커서를 갖다 대면 "HOW ARE YOU?"가 표시되고,

- 마우스 커서가 문구를 벗어나면 "SEE YOU LATER"가 표시됩니다.

 

- 따라서 마지막으로 보이는 문구는 "SEE YOU LATER"입니다.

- 물론 새로고침을 하면 다시 "HELLO EVERYONE ^^"이 보이게 됩니다.

 

 

3.5. 3.4과 동일한 결과를 hover로 구현

$(function() {

    $("#listener").hover(

        function() {

            $("#listener").html("HOW ARE YOU?");

        },

        function() {

            $("#listener").html("SEE YOU LATER");

        }
        
    );
    
});

- mouseenter, mouseleave로 구현했던 코드와 같은 작용을 하게 됩니다.

 

 

 

이상으로 마우스 관련 함수인 mouseenter, mouseleave, hover 함수를 알아보았습니다.

 

---