[JavaScript ] addEventListener, mouse event의 종류

 

 

Mouse Event

mouse와 관련된 대표 event에 대해 알아보자.

MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다. (키보드, 마우스처럼)

 

1. mousedown / mouseup

요소 위에서 마우스를 클릭하거나 뗄 때 발생한다.

2. mouseover / mouseout

마우스 커서가 요소 바깥에 있다가 요소 안으로 움직이거나 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합한다.

3. mousemove

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

4. click

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

5. dblclick

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

6. contextmenu

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

 

mousedown 예제

미리 그려둔 html의 cavas를 지정하여 마우스가 요소 위에서 움직일 때마다 값을 출력하도록 하였다.

const canvas = document.querySelector(".jsCanvas");

function onMouseMove(e) {
  console.log(e);
}

if (canvas) canvas.addEventListener("mousemove", onMouseMove);