[JQUERY]마우스 이벤트 처리하기
마우스의 이벤트를 처리한다.
특정 마우스의 이벤트를 처리한다.
1. 샘플예제
- 결과 화면
[특정 버튼위에 마우스가 위치한 경우]
[버튼을 마우스 오른쪽 버튼으로 클릭한 경우]
[버튼을 마우스 왼쪽 버튼으로 클릭한 경우]
2. 소스코드
<%----javascript start-----------------------------------------------------%>
<script type="text/javascript">
$(document).ready(function(){
$(".buttons").bind("mousedown", function( event ){
if( event.which == 1 ){
alert("Left mouse button click " + $(this).text());
}else if( event.which == 2 ){
alert("Right mouse button click " + $(this).text());
}
});
/*
$(".buttons").bind("mouseup", function(){
alert("mouseup event " + $(this).text());
});
*/
$(".buttons").bind("mouseover", function(){
alert("mouseover event " + $(this).text());
});
/*
$(".buttons").bind("mouseout", function(){
alert("mouseout event " + $(this).text());
});
*/
});
</script>
<%----javascript end-----------------------------------------------------%>
<%----HTML start---------------------------------------------------------%>
<span class = "buttons" id="Bold" >Bold button</span>
<span class = "buttons" id="Italic" >Italic button</span>
<%----HTML end-----------------------------------------------------------%>
3. 설명
해당 버튼에 마우스 관련된 이벤트를 설정하여 bind() 한다.
마우스 버튼이 클릭되었을 때 event.button 이 0 인 경우 마우스 좌측, 2 인 경우 마우스 우측 으로 설정한다.
마우스가 해당 버튼 위에 위치하게 되면 이벤트를 처리한다.
- bind(eventType, data, handler)
: eventType는 이벤트의 타입을 지정하는 문자열로써 click, dblclick, focus, blur등등
: data는 이벤트 핸들러에 전달할 데이터로써 생략하면 데이터 대신 이벤트 핸들러 함수가 된다.
: handler는 이벤트가 발생하면 수행할 문장들을 가진 함수
- mousedown(handler)
: 마우스 다운 이벤트 발생 시 실행 함수입니다.
: 마우스 클릭 버튼이 눌렸을때 이벤트
: handler : event - event.button(0) 좌클릭, event.button(2) 우클릭
- mouseup(handler)
: 마우스 업 이벤트 발생 시 실행 함수입니다.
: 마우스 클릭 버튼이 눌렸다가 버튼이 다시 올라올때 이벤트
- mouseover(handler)
: 마우스 over 이벤트 발생 시 실행 함수입니다.
: 마우스의 위치가 해당 버튼의 위에 위치할때 이벤트
- mouseout(handler)
: 마우스out 이벤트 발생 시 실행 함수입니다.
: 마우스의 위치가 해당 버튼의 위에 있다가 버튼의 영역에서 없어졌을때 이벤트
JQUERY API 주소