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

jQuery API 정복 - 클릭 이벤트, click()

by zoo10 2011. 11. 25.

.click()

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

함수들

.click( handler(eventObject) )Returns : jQuery

개요 : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.

  • .click( handler(eventObject) )
  • handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
  • .click( [eventData], handler(eventObject) )
  • eventData 이벤트 핸들러에 전달될 데이터 집합.
  • handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
  • .click( )

이 함수는 .bind('click', handler)을 줄여 놓은 것입니다. 그리고 .trigger('click') 로 click 이벤트를 발생시키기도 합니다.

click 이벤트는 요소(element)를 마우스 포인터로 누르고 떨어질 때 발생합니다. HTML 어떤 요소라도 이 이벤트를 발생시킬 수 있습니다.

HTML을 보면

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

<div>에 이벤트를 바인딩 해보면 :

$('#target').click(function() {
  alert('Handler for .click() called.');
});

클릭하면 알림창이 나타납니다.

Handler for .click() called.

다른 요소를 클릭했을해서 같은 효과를 내보려면 :

$('#other').click(function() {
  $('#target').click();
});

이 코드를 추가해서 id=other 인 div를 클릭해도 같은 결과를 볼 수 있습니다.

click 이벤트는 아래와 같이 진행할 때 발생합니다.

  • 포인터가 요소 내에 있는 동안 마우스 버튼을 내리 누릅니다.
  • 포인터가 요소 내에 있는 동안 마우스 버튼 누름을 해제합니다.

예 제  
클릭하면 숨겨봅니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>

</body>
</html>

미리보기

 

클릭이야 말로 웹을 비롯한 유저 인터페이스의 기본이죠. 마우스의 기본적인 기능이잖아요. 아무렇지 않게 적응해서 사용하지만 이 클릭이 초심자에게는 아주 어려운 액션이기도 해요. 어르신들이 마우스 클릭을 힘겨워들 하시잖아요. 요즘이야 많이 좋아졌지만요. ^^

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.