브라우저 이벤트 정리 1. 마우스이벤트

 

 

1. 마우스이벤트 (마우스 뿐 아니라 핸드폰, 태블릿에도 생기는 이베트임)

mousedown·mouseup

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

mouseover·mouseout

마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생

mousemove

마우스를 움직일 때 발생

click

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

dblclick

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

contextmenu

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

 

 

 

단순한 마우스 왼쪽 클릭시에 나타나는 이벤트는

mousedown > mouseup > click 이렇게 나타남

 

오른쪽 클릭시 이벤트

mousedown > contextmenu > mouseup

 

 

 

 

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

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

반면 mousedown이벤트나 mouseup 이벤트를 다룰 땐 해당 이벤트의 핸들러에 event.button을 명시해 줘야 할 수 있다.

 

이 이벤트들은 마우스 버튼 어디에서나 발생할 수 있는데 button 프로퍼티를 사용해야 정확히 어떤 버튼에서 이벤트가 발생했는지 알 수 있기 때문이다.

 

버튼 event.button property

왼쪽(주요 버튼)	0
가운데(보조 버튼)	1
오른쪽 (두 번째 버튼)	2
X1(뒤로 가기 버튼)	3
X2(앞으로 가기 버튼)	4

상당수의 마우스는 왼쪽, 오른쪽 버튼만 가지고 있기 때문에 이 마우스들이 만들어내는 event.button 값은 0이나 2.

터치를 지원하는 기기들도 사람이 해당 기기를 터치했을 때 유사한 이벤트를 만든다.

참고로 buttons라는 프로퍼티도 있는데, 이 프로퍼티는 여러 개의 버튼을 한꺼번에 눌렀을 때 해당 버튼들에 대한 정보를 정수 형태로 저장해 줍니다. 실무에서 buttons 프로퍼티를 만날 일은 극히 드물다.

 

 

 

clientX, clientY, pageX, pageY

1. 클라이언트 좌표: clientX와 clientY
2. 페이지 좌표: pageX와 pageY

https://ko.javascript.info/coordinates

좌표

 

 

 

 

mousedown 이벤트가 발생하면 브라우저 기본 동작 때문에 글자가 선택된다.

이런 이벤트를 막고 싶다면 기본동작을 막아서 문제를 해결할 수 있다.