✔️마우스 버튼 이벤트

/** 
 * [마우스 버튼 이벤트]
 * 
 * > MouseEvent.button
 * 0: 마우스 왼쪽 버튼
 * 1: 마우스 휠
 * 2: 마우스 오른쪽 버튼
 * 
 * > MouseEvent.type
 * click: 마우스 왼쪽 버튼을 눌렀을 때
 * contextmenu: 마우스 오른쪽 버튼을 눌렀을 때
 * dblclick: 동일한 위치에서 빠르게 두번 click할 때
 * mousedown: 마우스 버튼을 누른 순간
 * mouseup: 마우스 버튼을 눌렀다 뗀 순간
 */

❗한 가지 주의해야 될 부분은 하나의 동작에 여러 이벤트들이 발생할 수도 있다.
ex)마우스 왼쪽버튼을 한 번만 클릭하더라도 마우스를 눌렀다가 뗀 동작이기 때문에
mousedown,mouseup,click까지 총 3개의 이벤트가 발생...

이렇게 하나의 동작에 여러 이벤트가 발생하는 경우에 이 각각의 순서들을 잘 이해해두는 것이 중요.

그럼 더블클릭은 어떨까???😲😲😲


더블클릭은 클릭을 빠르게 두 번 한거니까 보는 것처럼 클릭 이벤트가 두 번 발생하고 나서
더블클릭 이벤트가 발생한다. 총 7개의 이벤트가 발생.

// mousedown 이벤트가 발생했습니다.
// mouseup 이벤트가 발생했습니다.
// click 이벤트가 발생했습니다.🔹
// mousedown 이벤트가 발생했습니다.
// mouseup 이벤트가 발생했습니다.
// click 이벤트가 발생했습니다.🔹
// dblclick 이벤트가 발생했습니다.

더블클릭 이전에 클릭 이벤트가 먼저 두 번 발생하면서 뭔가 예상하지 못한 결과를 얻을 수 있는
실수를 할 가능성이 있음! 이런 부분도 잘 기억하기!!!

그리고 마우스 오른쪽 버튼을 누를 때 이벤트 발생 순서가 운영체제별로 달라질 수도 있다.
윈도우의 경우 mousedown-mouseup-contextmenu 순서로 이벤트가 발생하지만
맥 OS의 경우 mousedown-contextmenu-mouseup 순서로 발생한다.
심지어 preventDefault 메소드로 오른쪽 버튼을 클릭했을 때 메뉴창이 뜨지 않도록 만들었는데
만약 메뉴창이 뜨는 상황이라면 mouseup 이벤트가 발생하지 않는 모습도 보여줌..

---

✔️마우스 이동 이벤트 1

/** 
 * [마우스 이동 이벤트]
 * 
 * > MouseEvent.type
 * mousemove: 마우스 포인터가 이동할 때
 * mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
 * mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때 
 *
 * 
 * //위치와 관련된 이벤트 객체의 프로퍼티들
 * 
 * > MouseEvent.clientX, clientY
 * : 화면에 표시되는 창 기준 마우스 포인터 위치   
 * 
 * > MouseEvent.pageX, pageY
 * : 웹 문서 전체 기준 마우스 포인터 위치
 * 
 * > MouseEvent.offsetX, offsetY
 * : 이벤트가 발생한 요소 기준 마우스 포인터 위치
 */

const box1 = document.querySelector('#box1');

function onMouseMove(e) {
  //스크롤한 상태에서 보면 y값이 조금 차이가 나는 걸 확인.
  console.log(`client: (${e.clientX}, ${e.clientY})`);//화면에 표시되는 창을 기준으로 마우스 위치를 담음
  console.log(`page: (${e.pageX}, ${e.pageY})`);//문서 전체를 기준으로 마우스 위치를 담음
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
  console.log('------------------------------------');
}

box1.addEventListener('mousemove', onMouseMove);

++예를 들어서 이런 위치 정보를 가지고 특정한 위치에 도달했을 때 어떤 동작이 일어나도록 할 수도 있고 혹은 연속적으로 발생한 이벤트끼리의 위치값을 계산해서 지금은 x값이 증가하고 y값도 증가했으니까 오른쪽 아래 방향으로 마우스가 이동한 방향을 파악하는데도 활용할 수 있다는 점 참고!

✍️ client, page, offset 차이

1. clientX, clientY

: client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고 있다. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻한다.

clientX: 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있다.
clientY: 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있다.

client값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를(0,0)으로 계산한다.

2. offsetX, offsetY

: offset프로퍼티는 이벤트가 발생한 target이 기준이 된다.

offsetX: 이벤트가 발생한 target내에서 마우스의 X좌표 위치를 담고 있다.
offsetY: 이벤트가 발생한 target내에서 마우스의 Y좌표 위치를 담고 있다.

offset값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를(0,0)으로 계산한다.

3. pageX, pageY

: page 프로퍼티는 전체 문서를 기준으로 마우스 좌표 정보를 담고 있다. 그렇기 때문에 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정한다는 점이 앞의 두 프로퍼티와의 차이점이다.

pageX: 전체 문서 내에서 마우스의 X좌표 위치를 담고 있다.
pageY: 전체 문서 내에서 마우스의 Y좌표 위치를 담고 있다.

⭐⭐자칫 client값과 혼동하기 쉬우니 잘 구분하기!!

📢그림으로 정리하기