.dblclick()
원문 링크 
http://api.jquery.com/dblclick/
함수들
개요 : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
- .dblclick( handler(eventObject) )
- handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
- .dblclick( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 집합.
- handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
- .dblclick( )
이 함수는 .bind('dblclick', handler)을 줄여 놓은 것입니다. 그리고 .trigger('dblclick') 로 dblclick 이벤트를 발생시키기도 합니다.
dblclick 이벤트는 요소(element)를 더블클릭하면 발생합니다. HTML 어떤 요소라도 이 이벤트를 발생시킬 수 있습니다.
HTML을 보면
<div id="target"> Double-click here </div> <div id="other"> Trigger the handler </div>
<div>에 이벤트를 바인딩 해보면 :
$('#target').dblclick(function() {
alert('Handler for .dblclick() called.');
});더블클릭하면 알림창이 나타납니다.
Handler for .click() called.
다른 요소를 클릭했을해서 같은 효과를 내보려면 :
$('#other').click(function() {
$('#target').dblclick();
});이 코드를 추가해서 id=other 인 div를 클릭해도 같은 결과를 볼 수 있습니다.
dblclick 이벤트는 아래와 같이 진행할 때 발생합니다.
- 포인터가 요소 내에 있는 동안 마우스 버튼을 내리 누릅니다.
- 포인터가 요소 내에 있는 동안 마우스 버튼 누름을 해제합니다.
- 시스템에 허용되어 있는 시간안에 포인터가 요소 내에 있는 동안 마우스 버튼을 다시 내리 누릅니다.
- 포인터가 요소 내에 있는 동안 마우스 버튼 누름을 해제합니다.
예 제
더블클릭으로 바탕색을 바꿔봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:blue;
color:white;
height:100px;
width:150px;
}
div.dbl { background:yellow;color:black; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div><span>Double click the block</span>
<script>
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
</script>
</body>
</html>미리보기
클릭은 쉬운 것. 더블클릭은 고도의 기술이 필요합니다. 따닥~. 처음에는 쉽지 않습니다. 다들 그러셨죠? :)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - event.pageY, 마우스 Y 좌표 (0) | 2011.12.13 |
|---|---|
| jQuery API 정복 - event.pageX, 마우스 X 좌표 (0) | 2011.12.13 |
| jQuery API 정복 - die(), 이벤트 해제하기 (2) | 2011.12.08 |
| jQuery API 정복 - delegate(), 이벤트 바인딩하기 (1) | 2011.12.08 |
| jQuery API 정복 - 클릭 이벤트, click() (0) | 2011.11.25 |
| jQuery API 정복 - 변경 이벤트, change() (0) | 2011.11.24 |
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |
| jQuery API 정복 - 이벤트 연결하기, bind() (6) | 2011.11.23 |