[JS] MouseEvent를 알아보자! (mousedown, mouseup, mousemove)

MouseEvent는 마우스의 클릭 또는 커서의 이동과 관련된 이벤트입니다. MouseEvent를 활용한다면 마우스의 행동에 따라 HTML 요소들을 제어하기 더 쉬워집니다.

mousedown

마우스를 누를 때 발생하는 이벤트입니다.

mouseup

마우스에서 손가락을 뗄 때 발생하는 이벤트입니다.

mousedown과 mouseup 이벤트를 활용하면 마우스의 클릭과 관련된 요소를 제어할 수 있습니다. 아래 코드에서는 버튼 요소가 눌릴 때만 그 안의 이미지 요소의 소스를 바꿔주고 있습니다.

// src가 원래 1.png인 이미지 요소를 클릭했을 때만 2.png로 교체
const btn = document.querySelector('button');
const img = btn.querySelector('img');

btn.addEventListener('mousedown', () => {
  img.src = './images/2.png';
}
                     
btn.addEventListener('mouseup', () => {
  setTimeout(() => {
    img.src = './images/1.png';
  }, 1000);
}

mousemove

mousemove는 마우스 커서를 움직일 때 발생하는 이벤트입니다. 커서가 움직일 때마다 발생하는 특성상 드래그, 스크롤, 그림 그리기 등 마우스를 연속적으로 움직이는 상황에 많이 일어납니다.

// 스크롤이 가능한 요소에서 마우스 움직임으로 스크롤 따라가기
const container = document.querySelector('.container');

container.addEventListener('mousemove', e => {
  container.scrollLeft += e.movementX;
});

mouseenter, mouseover

mouseenter와 mouseover 이벤트는 마우스 커서를 요소 위에 올려놓았을 때 발생하는 이벤트 입니다. 그렇다면 두개의 이벤트의 차이는 무엇일까요?

그건 바로 mouseover 이벤트는 버블링이 일어나는 반면, mouseenter 이벤트는 버블링이 일어나지 않는다는 차이점이 있습니다.
그렇기 때문에 mouseenter 이벤트의 MDN 공식 문서에서는 복잡한 HTML 구조의 경우 성능 저하가 일어날 수 있는 mouseover보단 mouseenter를 사용할 것을 권장하고 있습니다.

mouseleave, mouseout

mouseleave와 mouseout 이벤트는 마우스 커서가 해당 요소를 떠날 때 발생하는 이벤트입니다. 이 두 이벤트 또한 버블링의 발생 유무에서 차이점을 보이고 있습니다.