개발하다 보면 마우스 관련해서 여러 가지 이벤트를 처리해야 하는데 이 처리해야 하는 경우를
알아보고 어떻게 이벤트 처리를 해야 하는지 알아보자.
▶ 마우스 업 이벤트 처리
버튼을 누른 후 놓았을 때 이벤트를 처리하는 코드
$('.button').on('mouseup', function(e){
alert('마우스를 놓으면 alert이 찍힙니다.');
});
▶ 마우스 오버 이벤트 처리
마우스를 버튼 위로 가져갔을 때 이벤트를 처리하는 코드
$('.button').on('mouseover', function(e){
alert('마우스를 버튼 위로 가져가면 alert이 찍힘');
});
▶ 마우스 아웃 이벤트 처리
마우스가 버튼 범위에서 벗어나면 이벤트를 처리하는 코드
$('.button').on('mouseout', function(e){
alert('마우스가 버튼 범위를 벗어나면 alert이 찍힘');
});
▶ 마우스 다운 이벤트 처리
버튼을 누른 즉시 이벤트를 처리하는 코드
$('.button').on('mousedown', function(e){
alert('버튼을 누른 즉시 alert이 찍힘');
});
▶ 어느 마우스 버튼을 눌렀는지 확인하는 방법
마우스로 웹 페이지에 있는 버튼을 눌렀을 때 마우스 버튼이 왼쪽으로 클릭했는지, 오른쪽으로 클릭했는지
알고 싶을 때 마우스 이벤트 처리를 어떻게 해야 하는지 알아보자.
이벤트 중 click 이벤트로 실험을 해봤는데 왼쪽 버튼만 인식해서 click 이벤트를 사용하지 말고,
mousedown 이벤트나 mouseup 이벤트를 사용해야 한다.
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$('.button').on('mousedown', function(e){
console.log(e.button)
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<button class="button" id="btn-1">1번 버튼</button>
</body>
</html>
위 코드를 보면 스크립트 부분에 e.button 이게 마우스 왼쪽이면 콘솔 로그에 숫자 0이 찍히고
오른쪽이면 2가 찍힌다.
$('.button').on('mousedown', function(e){
if(e.button === 0){
// 마우스 왼쪽 클릭시 실행코드
}else if(e.button === 2){
// 마우스 오른쪽 클릭시 실행코드
}
});
이렇게 해서 사용하면 마우스 왼쪽/오른쪽 클릭 시 알아낼 수가 있다.
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기 (0) | 2022.03.06 |
|---|---|
| jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0) | 2022.03.06 |
| jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법 (0) | 2022.03.05 |
| jQuery - 자동으로 이벤트 발생 시키는 방법 (0) | 2022.03.05 |
| jQuery - button event(버튼 이벤트) 어느 버튼 클릭했는지 알아야 할 때 (0) | 2022.03.05 |