mousedown
원문 링크 
http://api.jquery.com/mousedown/
개요 : "mousedown" JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.
- .mousedown( handler(eventObject) )
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mousedown( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mousedown( )
이 함수는 .bind('mousedown', handler) 와 .trigger('mousedown') 를 줄여 표현한 것입니다.
mousedown 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 누르면 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
예를들어:
<div id="target"> Click here </div> <div id="other"> Trigger the handler </div>
<div>에 이벤트를 바인딩 하려면 :
$('#target').mousedown(function() {
alert('Handler for .mousedown() called.');
});이 요소를 클릭하면 알림창이 나타납니다.
다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.
$('#other').click(function() {
$('#target').mousedown();
});위 코드를 추가하고 실행시키면 위와 같은 결과를 볼 수 있습니다.
mousedown 이벤트는 마우스 버튼을 클릭하면 발생합니다. 특정 버튼을 누르면 이벤트는 which 속성을 이용할 수 있게 됩니다. 이 속성은 모든 브라우져에서 지원하지는 않습니다. Internet Explorer 는 대신 button을 사용합니다. 하지만 jQuery 는 어떤 브라우져에서도 안전하게 사용할 수 있도록 표준화를 하였습니다. which 의 값의 의미는 다음과 같습니다. 1 이면 left 버튼, 2 이면 중간 버ensuring튼(휠), 3 이면 오른쪽 버튼을 뜻합니다.
예 제
마우스의 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' 카테고리의 다른 글
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
|---|---|
| jQuery API - mousemove(), 마우스가 요소에서 움직일 때 (0) | 2012.01.13 |
| jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0) | 2012.01.13 |
| jQuery API - mouseenter(), 마우스 진입 감지 이벤트 (2) | 2012.01.04 |
| jQuery API - load(), 로드되면 발생하는 이벤트 (0) | 2012.01.04 |
| jQuery API - live(), 이벤트 바인딩하기 (0) | 2011.12.26 |
| jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0) | 2011.12.26 |
| jQuery API 정복 - keypress(), 브라우져의 키 누름 이벤트 (0) | 2011.12.26 |