1. 마우스 버튼 이벤트
왼쪽 클릭, 휠 등과 같이 마우스의 각 버튼 별로 이벤트를 구분하고 싶다면, MouseEvent 객체의 button 프로퍼티를 활용할 수 있다.
MouseEvent.button 프로퍼티 값에 따른 버튼은 다음과 같다.
0: 마우스 왼쪽 버튼1: 마우스 휠2: 마우스 오른쪽 버튼
또한, 각 버튼을 한 번 클릭하는지, 더블 클릭하는 지에 대해서도 구분을 할 수 있으며, MouseEvent.type 프로퍼티 값에 따른 이벤트 구분은 다음과 같다.
click: 마우스 왼쪽 버튼을 눌렀을 때contextmenu: 마우스 오른쪽 버튼을 눌렀을 때dblclick: 동일한 위치에서 빠르게 두 번click할 때mousedown: 마우스 버튼을 누른 순간mouseup: 마우스 버튼을 눌렀다가 뗀 순간
마우스의 경우, 하나의 동작에 여러 이벤트가 발생할 수 있다는 것을 주의해야 한다.
예를 들자면, 마우스 왼쪽 버튼을 한 번 눌렀다가 뗀 동작만으로도, mousedown, mouseup, click의 세 가지 이벤트가 발생한다.
또한, 마우스 오른쪽 버튼을 누르는 경우, 이벤트 발생 순서가 운영체제별로 달라질 수도 있다는 점을 주의해야 한다.
contextmenu 이벤트가 발생할 때, 윈도우 운영체제의 경우, mousedown, mouseup, contextmenu 순으로 이벤트가 발생하는 반면, 맥 OS의 경우, mousedown, contextmenu, mouseup 순서로 이벤트가 발생한다.
2. 마우스 이동 이벤트
2.1 MouseEvent.type
주로 사용되는 MouseEvent.type은 다음과 같다.
mousemove: 마우스 포인터가 이동할 때mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때
2.2 MouseEvent.clientXY
client 프로퍼티는 클라이언트 영역 내에서의 마우스 좌표 정보를 담고있다.
클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 말한다.
즉, clientX와 clientY는 브라우저가 표시하는 화면 내의 마우스의 X 또는 Y 좌표의 위치를 담고 있는 것이다.
client값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에, 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JS with Codeit</title>
</head>
<body>
<div id="box1" class="box">
mousemove
</div>
<div id="box2" class="box">
<b class="title">mouseover / mouseout</b>
<div id="cell-1" class="cell">cell-1</div>
<div id="cell-2" class="cell">cell-2</div>
<div id="cell-3" class="cell">cell-3</div>
<div id="cell-4" class="cell">cell-4</div>
</div>
<script src="index.js"></script>
</body>
</html>const box1 = document.querySelector('#box1');
function onMouseMove(e) {
console.log(`client: (${e.clientX}, ${e.clientY})`);
}2.3 MouseEvent.pageXY
page 프로퍼티는 전체 문서를 기준으로 마우스의 좌표 정보를 담고 있다.
때문에, 스크롤로 인해서 보이지 않는 화면의 영역까지 포함해서 측정한다는 점에서, client나 offset과는 차이가 있다.
const box1 = document.querySelector('#box1');
function onMouseMove(e) {
console.log(`page: (${e.pageX}, ${e.pageY})`);
}2.4 MouseEvent.offsetXY
offset 프로퍼티는 이벤트가 발생한 target이 기준이 된다.
다시 말하면, offsetX와 offsetY는 이벤트가 발생한 target 내에서의 마우스의 X 또는 Y 좌표의 위치를 담고 있는 것이다.
client와 같이, offset 값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에, 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.
const box1 = document.querySelector('#box1');
function onMouseMove(e) {
console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
}
2.5 mouseover / mouseout
mouseover는 특정 요소 내로 마우스 커서가 들어갈 때 발생하는 이벤트이며, mouoseout은 특정 요소 밖으로 마우스 커서가 나올 때 발생하는 이벤트이다.
요소를 이동하는 경우, mouseout과 mouseover가 순차적으로 발생한다는 사실도 기억해두면 좋다.
이 특성을 잘 이해하고 있으면, 아래 예시와 같이 코드를 작성하는 것도 가능하다.
const box2 = document.querySelector('#box2');
function printEventData (e) {
if (e.target.classList.contains('cell')) {
e.target.classList.toggle('on');
}
}
box2.addEventListener('mouseover', printEventData);
box2.addEventListener('moustout', printEventData);2.6 relatedTarget
MouseEvent.target은 이벤트가 발생한 요소를 담고 있는 반면,
MoustEvent.relatedTarget은 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 담고 있다.
때문에, 이를 잘 활용하면, 마우스의 이동 경로를 파악할 때 유용하다.
MouseEvent.type이 mouseover일 때는, 마우스가 이동하기 직전의 요소를,
MouseEvent.type이 mouseout일 때는, 마우스가 이동한 직후의 요소를 다룰 수 있다.
2.7 mouseenter / mouseleave
mouseenter는 mouseover처럼, 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때 발생하며,
mouseleave는 mouseout처럼, 마우스 포인터가 요소 안쪽에서 바깥으로 발생한다.
mouseover 및 mouseout과의 차이는 다음과 같다.
-
버블링이 일어나지 않는다.
-
자식 요소의 영역을 계산하지 않는다.
결론적으로, 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고 싶은 경우에는 mouseover 또는 mouseout을 활용해야 하고,
자식 요소에는 영향을 끼치게 하지 않도록 하고 싶다면, mouseenter 또는 mouseleave를 사용하는 것이 바람직하다.
