불로구
자바스크립트 - 마우스 핸들링 본문
자바스크립트에서는 마우스 관련 이벤트가 존재한다.
|
x, y |
타겟 객체의 부모 객체 내에서의 마우스 좌표 |
|
clientX, clientY |
브라우저 윈도우의 문서 출력 영역 내에서의 마우스 좌표 |
|
offsetX, offsetY |
타겟 객체 내에서의 마우스 좌표 |
|
screenX, screenY |
스크린 기준으로 한 마우스 좌표 |
|
button |
0 : 아무 버튼도 안 눌려짐 1 : 왼쪽 버튼 눌려짐 2 : 오른쪽 버튼 눌려짐 3 : 왼쪽, 오른쪽 버튼 모두 눌려짐 4 : 중간 버튼 눌려짐 |
|
wheelDelta |
양수 : 위쪽으로 마우스 굴림 음수 : 아래쪽으로 마우스 굴림 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
outline: 1px solid red;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div onmousemove="where(event)">마우스 인식 공간</div>
<div id="textarea"></div>
<script>
let divTag = document.getElementById("textarea");
function where(e){
let text = "x = " + e.clientX + ", y = " + e.clientY + "<br>";
console.log(text);
divTag.innerText = text;
}
</script>
</body>
</html>
이렇게 특정 공간 안에서 마우스의 좌표값을 추출할 수 있다!
마우스 관련 이벤트 리스너의 호출
|
onmousedown |
HTML 태그에 마우스 버튼 누르는 순간 |
|
onmouseup |
눌러진 마우스 버튼이 놓이는 순간 |
|
onmouseover |
마우스가 HTML 태그 위로 올라오는 순간 |
|
onmouseout |
마우스가 HTML 태그를 벗어나는 순간 |
|
onmouseenter |
마우스가 HTML 태그 위로 올라오는 순간 |
|
onmouseleave |
마우스가 HTML 태그를 벗어나는 순간 |
|
onwheel |
HTML 태그에 마우스 휠이 구르는 동안 호출 |
여기서는 onwheel 리스너에 대해 알아보자!
obj.onwheel = function(e){ // 익명함수로 onwheel 리스너 구현
if(e.wheelDelta < 0){ // 아래로 휠을 굴리면
...
}
else { // 위로 휠을 굴리면
...
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function down(obj){
obj.style.backgroundColor="red";
}
function up(obj){
obj.style.backgroundColor="blue";
}
function over(obj){
obj.style.backgroundColor="gray";
}
function out(obj){
obj.style.backgroundColor="white";
}
function wheel(event, obj){
if(event.wheelDelta < 0){
obj.style.border="3px solid red"
}
else{
obj.style.border="3px solid green";
}
}
</script>
</head>
<body>
<span onmousedown="down(this)" onmouseup="up(this)" onmouseover="over(this)" onmouseout="out(this)" onmousewheel="wheel(event, this)">테스트</span>
</body>
</html>
span 영역에 마우스를 올리면 배경색이 gray
span 영역에 마우스를 때면 배경색이 white
span 영역에 마우스를 누르는 동안 배경색 red
span 영역에 마우스를 누른 후 때면 배경색 blue
span 영역에 마우스 휠을 올리면 border의 값이 3px의 크기와 색상이 green
span 영역에 마우스 휠을 내리면 border의 값이 3px의 크기와 색상이 red
혹시나 궁금한 점은 댓글로 남겨주세요!
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 자바스크립트 - 이벤트 흐름 ( 캡쳐 단계, 버블 단계) (0) | 2020.06.26 |
|---|---|
| 자바스크립트 - 이벤트 타겟, 이벤트 취소( (preventDefault() ) (0) | 2020.06.25 |
| 자바스크립트 - 이벤트 객체 (0) | 2020.06.25 |
| 자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수 (0) | 2020.06.25 |
| 자바스크립트 - DOM 객체 생성, 삽입, 삭제 (0) | 2020.06.22 |
