Mouse Events

click

- <element var>.addEventListener('click', <event func>);

double click

- <element var>.addEventListener('dblclick', <event func>);

mousedown

- <event var>.addEventListener('mousedown', <event func>);

- 왼쪽 마우스 누르고 있는 상태 유지할 때

mouseup

- <event var>.addEventListener('mouseup', <event func>);

- 왼쪽 마우스 누르고 있다가 땔 때

mouseenter

- <event var>.addEventListener('mouseenter', <event func>);

mouseleave

- <event var>.addEventListener('mouseleave', <event func>);

mouseover

- <event var>.addEventListener('mouseover', <event func>);

- even triggers when moving into other elements of <event var>

mouseout

- <event var>.addEventListener('mouseout', <event func>);

- event triggers when moving out of other elements of <event var>

mousemove

- <event var>.addEventListener('mousemove', <event func>);

- triggers of any movement in <event var>

- 게임에서 많이 사용된다. => 마우스의 x좌표, y좌표에 대한 값을 동적으로 가져올 수 있다.

예제

const clearBtn = document.querySelector('.clear-tasks');
const card = document.querySelector('.card');
const heading = document.querySelector('h5');

// CLick
clearBtn.addEventListener('click', runEvent);
// Doubleclick
clearBtn.addEventListener('dblclick', runEvent);
// Mousedown
clearBtn.addEventListener('mousedown', runEvent); // 누른상태 유지
// Mouseup
clearBtn.addEventListener('mouseup', runEvent); // 누르고 있다가 뗄 때
// Mouseenter
card.addEventListener('mouseenter', runEvent);
// Mouseleave
card.addEventListener('mouseleave', runEvent);
// Mouseover
card.addEventListener('mouseover', runEvent); // even triggers when moving into other elements of selected element
// Mouseout
card.addEventListener('mouseout', runEvent); // even triggers when moving out of other elements of selected element
// Mousemove
card.addEventListener('mousemove', runEvent); // any movement in selected element

// event handler
function runEvent(e) {
  console.log(`EVENT TYPE: ${e.type}`);

  heading.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;

  document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 40)`;
}

- event handler 안에 mousemove로 할 수 있는 재미있는 기능들이 구현되어 있다.

- rgb 값 안에 마우스 표인터의 좌표를 넣음으로써, 마우스를 움직일 때마다 배경색깔이 동적으로 변하게 했다.