[JQuery] MouseEvent

 

일반적인 html 코드 상에서 마우스 이벤트를 거는건 조금 귀찮은 작업이었습니다.

코드 사이에 마우스 이벤트를 집어넣고 함수와 연결을 하는게 가독성이 떨어져 보기에도 안 좋았습니다.

그러던 중 JQuery가 나와서 구현하기에 좀더 간단해졌습니다.^^

 

예전에 클릭하고자 하는 객체가 있을 때, <a href> 로 감싸거나 아래와 같이 표현했습니다.

 

<button onmousedown="특정함수()">Click!!!</button>

 

마우스를 눌렀을 때 onmousedown, 마우스를 떼었을 때 onmouseout, 마우스가 객체 위로 올라갔을 때 onmouseover 등.. 모든 내용을 표현할 경우 내용이 길어져서 보기에도 별로 안 좋았습니다.

 

JQuery에서는 마우스 이벤트가 어떻게 사용되는지 살펴보도록 하겠습니다.

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <button id="btnClick">버튼</button>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

2. mousedown()

 

mousedown는 객체 위에 마우스를 올리고 버튼을 눌렀을 때 발생하는 이벤트 입니다.

 

위의 샘플 내용 중 버튼의 id 가 btnClick 이므로 적용해보도록 합니다.

아래와 같이 코드를 작성할 수 있습니다.

 

$('#btnClick').mousedown(function() {
    alert("MouseDown Event!");
});

 

btnClick 이라는 ID 라는 객체를 눌렀을 때, alert 이라는 팝업창이 뜨게 하였습니다.

 

 

3. click()

 

click은 mousedown 이벤트와 같은 역할을 합니다.

 

$('#btnClick').click(function() {
    alert("Click Event!");
});

 

Click 이벤트는 마우스 클릭만을 필요로 할 때 씁니다.

아래에서 설명할 mouseover, mouseup과 사용할 때는 click 보다 mousedown을 쓰는게 보기에 더 명확해집니다.

 

 

4. dblclick()

 

click은 double click 이벤트로 마우스 버튼을 빠르게 두 번 눌러야 발생하는 이벤트 입니다.

 

$('#btnClick').dblclick(function() {
    alert("Double Click Event!");
});

 

 

5. mouseup()

 

mouseup는 마우스 포인터가 객체 위에 있다가 마우스를 눌렀다 뗐을 때, 발생하는 이벤트입니다.

 

$('#btnClick').mouseup(function() {
    alert("MouseUp Event!");
});

 

 

6. mouseover()

 

mouseover 는 객체를 마우스로 클릭하지 않고 마우스 포인터를 객체 위에 올릴 때 발생하는 이벤트입니다.

 

예를 들어 홈페이지 메뉴 위에 마우스를 올릴 때, 클릭을 하지 않았는데도 이미지가 변경되는게 mouseover 이벤트가 적용된 것입니다.

 

$('#btnClick').mouseover(function() {
    alert("MouseOver Event!");
});

 

 

^ㅇ^!!!

 

마우스 이벤트의 함수 구분을 분리할 수 있어서 소스를 간결하게 쓸 수 있습니다.

 
이 게시물을...