mouseup
원문 링크 
http://api.jquery.com/mouseup/
개요 : "mouseup" JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.
- .mouseup( handler(eventObject) )
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseup( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseup( )
이 함수는 .bind('mouseup', handler) 와 .trigger('mouseup') 를 줄여 표현한 것입니다.
mouseup 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 눌렀다 뗄때 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
예를들어:
<div id="target"> Click here </div> <div id="other"> Trigger the handler </div>
<div>에 이벤트를 바인딩 하려면 :
$('#target').mouseup(function() {
alert('Handler for .mouseup() called.');
});이 요소를 클릭하면 알림창이 나타납니다.
다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.
$('#other').click(function() {
$('#target').mouseup();
});위 코드를 추가하고 실행시키면 위와 같은 결과를 볼 수 있습니다.
만일 유저가 요소 밖에서 마우스를 클릭한 후 드래그 하여 요소로 온 후 버튼을 떼었어도 mouseup 이벤트는 발생하게 됩니다. 이런 특정 행동은 대부분의 유저 인터페이스에서 버튼 누름 상태로 취급하지 않습니다. 그래서 이런 특별한 상황들 때문에 mouseup 이벤트 보다는 click 이벤트를 쓰는 것이 낫습니다.
예 제
마우스의 mouseup 와 mousedown 이벤트 발생을 텍스트로 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Press mouse and release here.</p>
<script>
$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});
</script>
</body>
</html>미리보기
글씨 있는 부분을 마우스를 이용해서 클릭해 보세요.
마우스 클릭이 대부분이죠. 마우스업을 쓸만큼 세밀한 이벤트 작업은 어디서 쓰는 걸까요?
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |
|---|---|
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |
| off(), 이벤트 해제하기 (0) | 2012.02.24 |
| jQuery API - mouseover(), 마우스가 올라올 때 (3) | 2012.01.13 |
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
| jQuery API - mousemove(), 마우스가 요소에서 움직일 때 (0) | 2012.01.13 |
| jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0) | 2012.01.13 |