.click()
원문 링크 
http://api.jquery.com/click/
함수들
개요 : 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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| 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 정복 - 더블클릭 이벤트, dblclick() (4) | 2011.11.25 |
| jQuery API 정복 - 변경 이벤트, change() (0) | 2011.11.24 |
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |
| jQuery API 정복 - 이벤트 연결하기, bind() (6) | 2011.11.23 |
| jQuery API 정복 - 요소 별로 감싸기, wrapAll() (0) | 2011.11.22 |