마우스 이벤트는 ‘마우스’라는 장치를 통해서만 생기는 것이 아니라, 핸드폰이나 태블릿 같은 다른 장치에서도 생긴다.

마우스 이벤트 종류

• mousedown/mouseup - 요소 위에서 마우스 왼쪽 버튼을 누를 때, 누르고 있다가 뗄 때 발생
• mouseover/mouseout - 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때
• mousemove - 마우스를 움직일 때
• click - 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown과 mouseup을 연달아 발생시킬 때
• dblclick - 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 클릭할 때 (요즘엔 잘 안 쓰이는 추세.)
• contextmenu - 마우스 오른쪽 버튼을 눌렀을 때 * 특별한 단축키를 눌러도 컨텍스트메뉴가 나타나게 할 수는 있지만 contextmenu라는 마우스 이벤트와는 다르다.

마우스 이벤트 순서

사용자는 단 하나의 동작을 했어도 실행되는 이벤트는 여러 개일 수 있다.

단순하게 마우스 왼쪽 버튼을 클릭하더라도, mousedown - mouseup - click 이벤트 총 3개가 발생한다. 이렇게 동작은 하나지만 여러 이벤트가 실행될 때 실행 순서는 내부 규칙에 따라서 결정된다.

마우스 버튼

클릭과 관련된 이벤트는 정확히 어떤 버튼에서 이벤트가 발생했는지를 알려주는 button 프로퍼티를 지원한다.

click 이벤트는 마우스 왼쪽 버튼, contextmenu 이벤트는 마우스 오른쪽 버튼을 눌렀을 때 발생하기 때문에, click과 contextmenu 이벤트를 다룰 때는 보통 button 프로퍼티를 사용하진 않는다.

반면, mousedown 이벤트나 mouseup 이벤트를 다룰 때는 해당 이벤트 핸들러에 event.button 을 명시해 줘야 할 수 있다. 이 이벤트들은 마우스 버튼 어디에서나 발생할 수 있는데, button 프로퍼티를 사용해야 정확히 어떤 버튼에서 이벤트가 발생했는지 알 수 있기 때문이다.

주요 event.button 프로퍼티 값

상당수의 마우스는 왼쪽, 오른쪽 버튼만 가지고 있기에, 이 마우스들이 만들어내는 프로퍼티 값은 0이나 2가 된다.