[JavaScript] 이벤트(1) - 마우스의 이벤트

이번 글은 자바스크립트에서 마우스 버튼 이벤트에 대한 글이다.

---

 

[ 마우스 버튼 이벤트 ]

- MouseEvent.button 프로퍼티

MouseEvent 객체에 button 프로퍼티를 사용하면 이벤트를 발생시킨 마우스가 어떤 버튼이였는지 확인 가능

MouseEvent.button

=> 0: 마우스 왼쪽 버튼

=> 1: 마우스 휠

=> 2: 마우스 오른쪽 버튼

 

- MouseEvent.type

MouseEvent.type : 각 버튼으로 할 수 있는 이벤트 타입

=> ex. (왼쪽 마우스를 누른 상황) → mousedown 실행 → mouseup 실행 → click 실행

=> ex. (왼쪽 마우스를 더블클릭으로 누른 상황) → mousedown 실행 → mouseup 실행 → click 실행 → dblclick 실행 

• click : 마우스 왼쪽 버튼을 눌렀을 때
• contextmenu : 마우스 오른쪽 버튼을 눌렀을 때
• dblclick : 동일한 위치에서 빠르게 두번 click할 때
• mousedown : 마우스 버튼을 누른 순간
• mouseup : 마우스 버튼을 눌렀다 뗀 순간

 

---

 

 

[ 마우스 이동 이벤트 ]

• mousemove : 마우스 포인터가 이동할 때
• mouseover : 마우스 포인터가 요소 밖에서 안으로 이동할 때
• mouseout : 마우스 포인터가 요소 안에서 밖으로 이동할 때

=> 마우스 이동 이벤트와 함께 사용되는 위치 메서드

• clientX, clientY : 지금 현재 화면에 표시되는 창 기준 마우스 포인터 위치
• pageX, pageY : 웹 문서 전체 사이즈 기준 마우스 포인터 위치
• offsetX, offsetY : 이벤트가 발생한 요소 기준 마우스 포인터 위치

// 사용 예시
console.log(`${e.clientX}, ${e.clientY});

 

 

=> 활용하기

• 특정 위치에 도달했을 때 어떤 동작이 발생
• 연속적으로 발생한 이벤트의 위치를 계산 → 지금 어디에서 어디로 얼만큼 이동했는지 계산

 

 

- e.relatedTarget : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해있던 요소 (↔target)

=> mouseover : target - 내부요소 / relatedTarget - 외부요소 (마우스가 이동하기 직전의 요소를 알 수 있음)

=> mouseout : target - 외부요소 / relatedTarget - 내부요소 (마우스가 이동한 직후의 요소를 알 수 있음)

 

---

 

 

[ mouseenter와 mouseleave ]

각각 mouseoover와 mouseout과 비슷한 의미를 가짐

차이점 : 버블링이 일어나지 않음 (이벤트가 자식요소에 영향을 끼치는지)

=> mouseover, mouseout : 이벤트 핸들러가 자식요소에까지 영향을 끼치게 하고 싶은 경우 사용

=> mouseenter, mouseleave : 자식요소에 영향 끼치지 않고 해당 요소에만 이벤트 핸들러를 적용

 

 

---

 

 

[ 정리 ]

이벤트 타입	설명
mousedown	마우스 버튼을 누르는 순간
mouseup	마우스 버튼을 눌렀다 떼는 순간
click	왼쪽 버튼을 클릭한 순간
dblclick	왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu	오른쪽 버튼을 클릭한 순간
mousemove	마우스를 움직이는 순간
mouseover	마우스 포인터가 요소 위로 올라온 순간
mouseout	마우스 포인터가 요소에서 벗어나는 순간
mouseenter	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

 

마우스 포인터 위치와 관련된 프로퍼티	설명
clientX, clientY	마우스 포인터의 브라우저 표시 영역에서의 위치
pageX, pageY	마우스 커서의 문서 영역에서의 위치
offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소에서의 위치
screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치

 

---