[다양한 이벤트 알아보기] 01. 마우스 버튼 이벤트

마우스 버튼으로 발생시킬 수 있는 이벤트 

/**
* [마우스 버튼 이벤트]
*
* > MouseEvent.button
* 0: 마우스 왼쪽 버튼
* 1: 마우스 휠 
* 2: 마우스 오른쪽 버튼
**/

마우스의 각 버튼별로 이벤트를 구분하고 싶을 때는 MouseEvent 객체의 button 이라는 프로퍼티를 활용하면 됩니다.

왼쪽부터 0,1,2 순서인데요. 그래서 만약 노트북을 사용한다면 마우스 패드에는 가운데 휠이 잘 없기 때문에 마우스로 할 수 있는 이벤트들은 button 프로퍼티가 0 혹은 2로 나눠진다고 생각할 수가 있습니다.

 

그리고 이 두 버튼으로 할 수 있는 주요 동작들을 나눠보자면 왼쪽 버튼 클릭과 오른쪽 버튼 클릭 그리고 왼쪽 버튼을 두 번 클릭하는 더블클릭까지 총 3가지로 나눠 볼 수 있습니다.

 

그래서 JavaScript에서 각각의 동작들은 이렇게 click,contextmenu, dbclick 이라는 타입으로 이벤트를 다룰 수가 있습니다.

그런데 여기서 끝이 아니라 mousedown과 mouseup이라는 이벤트 타입으로 좀 더 세밀하게 동작들을 다룰 수도 있습니다. 한 가지 주의해야 될 부분은 하나의 동작에 여러 이벤트들이 발생할 수도 있다는 점입니다.

 

예를 들어 사용자가 마우스 왼쪽 버튼을 한 번만 클릭하더라도 마우스를 눌렀다가 뗀 동작이기 때문에 mousedown, mouseup, click까지 총 3개의 이벤트가 발생한다는 것입니다. 다섯가지 이벤트를 미리 준비하고 웹 페이지에서 클릭을 한 번 하게 되면 콘솔에서 mousedown, mouseup, click 총 3가지 이벤트가 발생하는 것을 확인할 수 있습니다.

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

mousedown -> mouseup -> click

* > MouseEvent.type
* click: 마우스 왼쪽 버튼을 눌렀을 때
* contextmenu: 마우스 오른쪽 버튼을 눌렀을 때
* dbclick: 동일한 위치에서 빠르게 두번 click할 때
* mousedown: 마우스 버튼을 누른 순간
* mouseup: 마우스 버튼을 눌렀다 뺀 순간
*/

 

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

mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dbclick

 

만약 하나의 요소에 어떤 클릭과 더블클릭 이벤트를 모두 만들어야 하는데 더블클릭 이전에 클릭 이벤트가 두 번 발생한다는 사실을 생각하지 않고 더블 클릭 이벤트를 만들게 되면 클릭 이벤트가 먼저 두 번 발생하면서 예상하지 못한 결과를 얻을 수 있는 실수를 할 가능성이 생기게 됩니다.

 

그리고 또 한 가지 참고해야 할 부분은 마우스 오른쪽 부분을 누를 때 이벤트 발생 순서가 운영체제별로 달라질 수도 있다는 점입니다. 윈도우 운영체제에서는 contextmenu 이벤트가 발생할 때 click과 동일하게 mousedown, mouseup 그리고 contextmenu 순서로 이벤트가 발생하지만 맥 os의 경우에는 오른쪽 클릭을 해보면 mousedown, contextmenu, 그리고 mouseup 순서로 발생하는 것을 확인할 수 있습니다.

 

심지어 preventDefault 메소드로 오른족 버튼을 클릭했을 때 메뉴창이 뜨지 않도록 만들었는데 만약 메뉴창이 뜨는 상황이라면 mouseup 이벤트가 발생하지 않는 모습도 보여주고 있습니다.

마우스 오른쪽 버튼으로 이벤트를 제어하는 상황이 흔한 경우는 아니지만 참고하면 좋을 것 같습니다.