jQuery Event - Mouse Events
| .click() | 마우스 클릭 시 발생하는 이벤트 |
| .dblclick() | 마우스 더블클릭 시 발생하는 이벤트 |
| .mouseup() | 마우스 클릭 후 발생되는 이벤트 |
| .mousedown() | 마우스 클릭 시 발생하는 이벤트 |
| .toggle() | 두 개 이상의 이벤트를 순차적으로 실행되게 한다. 링크나 버튼에 선언 할 경우 .prevent Default를 수행하기 때문에 원래의 동작은 실행되지 않는다. |
| .mouseover() | 선택한 요소의 영역에 마우스 포인터가 올라갈 때 발생하는 이벤트 |
| .mouseout() | 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 |
| .mousemove() | 선택한 요소의 영역에서 마우스 포인터가 움직일 때 발생하는 이벤트 |
| .mouseenter() | 선택한 요소의 영역에서 마우스가 위치했을때 발생되는 이벤트 |
| .mouseleave() | 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 IE에서만 발생되는 이벤트이지만 jQuery는 브라우저 관계 없이 사용할 수 있도록 시뮬레이터된다. |
| .hover() | 마우스가 요소 위에 위치했을 때 발생하는 이벤트 |
[ .click(handler(eventObject)) ]
마우스 클릭 시 발생하는 이벤트
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행.
.click( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합.
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행.
.click( )
마우스 클릭 시 동작하는 이벤트로 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 해당 정의한 메서드가 실행 되며, 인자 값으로는 eventData로 이벤트에 대한 데이터 값이 전달 된다.
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("td").click(function () {
alert($(this).text());
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<table>
<tr>
<td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
<td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>
<tr>
<td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
</tr>
<tr>
<td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
</tr>
<tr>
<td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
</tr>
</table>
</div>
</body>
</html>
위의 예에서 $("td").click(function () 이라고 정의 할 경우 HTML 문서에 존재하는 모든 td 요소에 “click” 이벤트를 할당하고, 정의한 메서드의 결과인 alert($(this).text());을 실행하게 된다.
[ .dblclick(handler(eventObject)) ]
마우스 더블클릭 시 발생하는 이벤트
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행.
.dblclick( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합.
handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행.
.dblclick( )
$(document).ready(function () {
$("td").dblclick(function () {
alert($(this).text());
});
});
</script>
.click() 예제 소스에서 .dblclick() 을 적용하여 준 후 클릭이 아니라 더블클릭을 해주면 위와 동일한 결과를 얻을 수 있다.
[ .mouseup(handler(eventObject)) ]
마우스 클릭 후 발생되는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseup( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseup( )
[ .mousedown(handler(eventObject)) ]
마우스 클릭 시 발생하는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousedown( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousedown( )
$(document).ready(function () {
$("td").mouseup(function(){
$("p").append('<span style="color:#F00;">' + $(this).text() + '</span>');
}).mousedown(function(){
$("p").append('<span style="color:#00F;">' + $(this).text() + '</span>');
});
});
</script>
하단 html부분에 아래 소스 추가
<p>클릭값 : </p>
.mousedown(function(){ 을 이용하여 "td"태그 부분을 마우스로 클릭하면 파란색으로 해당 값을 "p"태그 부분에 입력하고 $("td").mouseup(function(){ 를 이용하여 클릭 후 빨간색으로 해당 값을 출력한다.
마우스 왼쪽 버튼을 누르면 .mousedown()이, 눌렀던 버튼을 떼면 .mouseup()이 실행된다.
[ .toggle(handler(eventObject), handler(eventObject) [, handler(eventObject)] ) ]
두 개 이상의 이벤트를 순차적으로 실행되게 한다.
링크나 버튼에 선언 할 경우 .prevent Default를 수행하기 때문에 원래의 동작은 실행되지 않는다.
handler(eventObject) 요소 클릭 짝수번째에 실행될 기능
handler(eventObject) 요소 클릭 홀수번째에 실행될 기능
handler(eventObject) ) 이 인자도 추가되면 토글의 순환이 3번 클릭에 한번씩으로 증가.
$(document).ready(function () {
$("td").toggle(
function () { $(this).css({"color":"blue"}); },
function () { $(this).css({"color":"red"}); },
function () { $(this).css({"color":""}); }
);
});
</script>
.toggle()은 위와 같이 하나의 객체에 2개 이상의 이벤트를 주기 위하여 사용된다.
위의 소스에서와 같이 "td"태그의 값을 한 번 클릭하면 파란 색으로, 두 번 클릭하면 빨간 색으로, 세 번 클릭하면 원래의 색으로 변하는 것을 확인 할 수 있다.
[ .mouseover(handler(eventObject)) ]
선택한 요소의 영역에 마우스 포인터가 올라갈 때 발생하는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseover( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseover( )
[ .mouseout(handler(eventObject)) ]
선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseout( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseout( )
[ .mouseenter(handler(eventObject)) ]
선택한 요소의 영역에서 마우스가 위치했을때 발생되는 이벤트
mouseenter(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseenter( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseenter( )
[ .mouseleave(handler(eventObject)) ]
선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseleave( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mouseleave( )
mouseover / out & mouseenter / leave 차이점 및 예제
차이점
위의 두그룹은 거의 비슷해보여, 크게 차이를 못느낄 수 있으나 결정적인 차이는 마우스가 엘리먼트에 도달할때 한번 발생하는가 라고 할 수 있다.
mouseover / out 이벤트의 경우 엘리먼트 위에서 마우스가 이동할때 계속해서 발생하지만 mouseenter / mouseleave 이벤트의 경우는 처음 한번말 발생 후 이벤트는 발생하지 않는다.
예제
<head>
<style>
div.out { width:40%; height:120px; margin:0 15px; background-color:#D6EDFC; float:left; }
div.in { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var i = 0;
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave").mouseenter(function() {
n += 1;
$(this).find("span").text( "mouse enter x " + n );
}).mouseleave(function() {
$(this).find("span").text("mouse leave");
});
});
</script>
</head>
<body>
<div class="out overout">
<span>move your mouse</span>
<div class="in"> </div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in"> </div>
</div>
</body>
</html>
이미지로는 정확히 구별 할 수 없지만 해당 소스를 실행하여 보면 mouseover/out의 경우 "div "내에서 마우스를 움직일 경우 지속적으로 i값이 증가가 되지만 mouseenter/leave의 경우 "div"내에 마우스를 올리면 n값이 증가하고 마우스가 밖으로 나가지 않는 한 값이 증가되지 않음을 확인 할 수 있다.
[ .mousemove(handler(eventObject)) ]
선택한 요소의 영역에서 마우스 포인터가 움직일 때 발생하는 이벤트
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousemove( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousemove( )
<head>
<style>
div { width:220px; height:170px; margin: 10px 50px 10px 10px; background:yellow; border:2px groove; float:left; }
p { margin:0; margin-left:10px; color:red; width:220px; height:120px; padding-top:70px; float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
});
});
</script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
</body>
</html>
div 내에서 마우스가 움직일 경우 마우스 포인터의 위치를 받아와서 값을 출력 함을 확인 할 수 있다.
[ .hover() ]
마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩
handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능
handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능
즉, hover()함수는 mouseenter와 mouseleave 이벤트를 한 번에 실행한다.
$(selector).hover(handlerIn, handlerOut) = $(selector).mouseenter(handlerIn).mouseleave(handlerOut);
원본 : http://findfun.tistory.com/entry/jQuery-API-정복-hover-마우스-오버-이벤트 (jQuery API가 잘 정리되어 있군요)
http://hyeonseok.com/soojung/contents/upload/jQueryBasicAPIs.pdf, http://www.sqler.com/390796
'Programming > JQuery' 카테고리의 다른 글
| jQuery Event - Form Events (0) | 2012.04.24 |
|---|---|
| jQuery Event - Keyboard Events (0) | 2012.04.23 |
| jQuery Event (0) | 2012.04.23 |
| jQuery Traverse - Tree Traversal (0) | 2012.04.20 |
| jQuery Traverse - Miscellaneous Traversing (0) | 2012.04.20 |
