[Javascript] Mouse Events 정리

우리가 만든 웹페이지에 동적인 역할을 부여하기 위해서는 여러가지 Event에 대한 이해와 사용능력이 필요하다.

수많은 Event들 중에서 가장 기본적인 Mouse events를 알아보자.

Mouse event의 종류는 위와 같다. (출처: https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events)

auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다.

click: 마우스 좌클릭에 의해 작동된다.

contextmenu: 마우스 우클릭 시 나오는 context menu가 사용자의 화면에 보여지기 전에 작동된다.

dblclick: 더블 클릭시 작동된다.

mouseup/mousedown: mousedown은 mouse 클릭 유지 시, mouseup은 클릭 유지를 풀었을 때 작동된다. 

이 event는 좌클릭 뿐만 아니라 어떠한 버튼 클릭에도 작동된다.

mouseenter/mouseleave: 마우스 포인터가 element 내부에 들어갈 때/나올 때 작동된다.

mouseover/mouseout: mouseenter/mouseleave와 같은 방식의 event이지만, 해당 EventListener가 적용된 element의 children에게도 적용된다.

mousemove: 마우스 포인터가 element 위에서 움직일 때 작동된다.

select: text가 선택됐을 때(드래그) 작동된다. 이 event는 element가 <input>태그 중 type이 text, textarea일 때만 작동한다.

wheel: 사용자가 휠을 작동시킬 때 작동한다.

다음은 위의 event들을 적용해 만들어본 예시이다. 이해에 도움이 된다면 좋겠습니다.

첫 번째 box는 mouseup/mousedown/wheel Event를,

두 번째 box는 mouseenter/mouseleave Event를,

세 번째 box는 click/auxclick/dblclick Event를 적용시켰다.

가장 아래의 조그마한 input 내부의 text를 select(드래그) 하거나, window 안에서 우클릭을 하면 하단에 message가 반복적으로 출력되도록 설정했다.