본문 바로가기
프로그래밍/jQuery

jQuery API - mouseup(), 마우스를 눌렀다 뗄 때

by zoo10 2012. 1. 13.

mouseup

원문 링크 http://api.jquery.com/mouseup/

.mouseup( handler(eventObject) )Returns : jQuery

개요 : "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 에 있는 내용임을 밝힙니다.