[JQUERY] 마우스 클릭 이벤트 - click, mousedown, mouseup

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

그중에서 마우스 클릭 관련 이벤트를 알아보겠습니다.

mousedown, mouseup, click 이벤트입니다.

 

---

 

1. 이벤트 정의 형태

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

    이벤트 처리 내용
    
});

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

 

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

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

 

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

 

 

2. 클릭 관련 이벤트 (물리적으로 마우스를 클릭했을 때)

 

이벤트 이름	설명
mousedown	마우스를 누르고 있는 상태
mouseup	mousedown에서 뗐을 경우
click	mousedown + mouseup : 마우스를 클릭했을 때

 

 

3. 예제 코드

 

* HTML 코드

<div id="listener">

    HELLO EVERYONE ^^

</div>

 

 

3.1. mousedown

$(function() {

    $("#listener").mousedown(function() {
    
        $("#listener").html("NICE TO MEET YOU");
        
    });
    
});

- 마우스를 누르면 "HELLO EVERYONE ^^" → "NICE TO MEET YOU"로 내용이 바뀝니다.

 

 

3.2. mouseup

$(function() {

    $("#listener").mouseup(function() {
    
        $("#listener").html("NICE TO MEET YOU, TOO");
        
    });
    
});

- 마우스 버튼을 눌렀다가 떼면 "HELLO EVERYONE ^^" → "NICE TO MEET YOU, TOO"로 내용이 바뀝니다.

 

 

3.3. click

$(function() {

    $("#listener").click(function() {
    
        alert("I LIKE YOU");
        
    });
    
});

- 마우스로 클릭하면 "I LIKE YOU"라는 문구가 팝업으로 뜹니다.

 

- 이때, 마우스로 클릭하는 것은 mousedown + mouseup을 한 상태입니다.

 

 

3.4. mousedown, mouseup 이벤트 함께 사용

$(function() {

    $("#listener").mousedown(function() {
    
        $("#listener").html("NICE TO MEET YOU");
        
    });

    $("#listener").mouseup(function() {
    
        $("#listener").html("NICE TO MEET YOU, TOO");
        
    });
    
});

- 두 이벤트를 함께 적용한 코드입니다.

 

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

- 위 문구를 마우스를 누르면 "NICE TO MEET YOU"가 표시되고,

- 마우스를 떼면 "NICE TO MEET YOU, TOO"가 표시됩니다.

 

- 따라서 마지막으로 보이는 문구는 "NICE TO MEET YOU, TOO"입니다.

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

 

 

3.5. 세 이벤트 모두 함께 사용

$(function() {

    $("#listener").mousedown(function() {
    
        $("#listener").html("NICE TO MEET YOU");
        
    });

    $("#listener").mouseup(function() {
    
        $("#listener").html("NICE TO MEET YOU, TOO");
        
    });

    $("#listener").click(function() {
    
        alert("I LIKE YOU");
        
    });
    
});

- 세 이벤트를 함께 적용한 코드입니다.

 

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

- 위 문구를 마우스를 누르면 "NICE TO MEET YOU"가 표시되고,

- 마우스를 떼면 "I LIKE YOU" 문구가 팝업으로 뜨면서 "NICE TO MEET YOU, TOO"가 표시됩니다.

 

- 따라서 마지막으로 보이는 문구는 "NICE TO MEET YOU, TOO"입니다.

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

 

 

 

이상으로 JQuery 클릭 이벤트에 대해 알아보았습니다.

 

---