December 4, 2021

이번 챕터에선 마우스 이벤트와 마우스 이벤트 객체의 프로퍼티에 대해 자세히 다루겠습니다.

마우스 이벤트에 대해 학습하기 전에 주의할 점은, 마우스 이벤트는 '마우스’라는 장치를 통해서만 생기는 것이 아니라 핸드폰이나 태블릿 같은 다른 장치에서도 생긴다는 점입니다.

마우스 이벤트 종류

앞서 다음과 같은 이벤트에 대해 알아본 바 있습니다.

mousedown·mouseup

요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스 버튼 누르고 있다가 뗄 때 발생합니다.

**mouseover·mouseout**마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때,

커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합니다.

mousemove

마우스를 움직일 때 발생합니다.

click

마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행됩니다.

dblclick

동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 클릭할 때 발생합니다. 요즘엔 잘 쓰이지 않습니다.

contextmenu

마우스 오른쪽 버튼을 눌렀을 때 발생합니다. 참고로 특별한 단축키를 눌러도 마우스 오른쪽 버튼을 눌렀을 때처럼 컨텍스트 메뉴가 나타나게 할 수는 있지만 contextmenu라는 마우스 이벤트와 동일하진 않습니다.

이 외에도 다양한 마우스 이벤트가 있는데, 다른 이벤트에 대해선 곧 다루겠습니다.