마우스 이벤트를 볼 때 우리는

• mousedown 마우스 버튼을 눌렀다
• mouseup 마우스 버튼이 놓아주다
• click 클릭 이벤트
• dblclick 더블 클릭 이벤트
• mousemove 마우스를 요소 위로 움직일 때
• mouseover 마우스가 요소 또는 그 하위 요소 중 하나 위로 이동할 때
• mouseenter 마우스를 요소 위로 움직일 때 마우스 오버와 비슷하지만 거품이 나지 않습니다.
• mouseout 마우스가 요소 밖으로 이동했을 때와 마우스가 자식 요소로 들어갈 때
• mouseleave 마우스를 요소 밖으로 옮길 때 mouseout과 비슷하지만 거품이 나지 않습니다.
• contextmenu 상황에 맞는 메뉴가 열릴 때 (예 : 마우스 오른쪽 버튼 클릭시

이벤트가 겹칩니다. 클릭 이벤트를 추적하는 것은 마우스 다운과 마우스 업 이벤트를 추적하는 것과 같습니다. dblclick의 경우 click도 두 번 발생합니다.

드래그 앤 드롭 이벤트를 추적하기 위해 mousedown, mousemove 및 mouseup을 함께 사용할 수 있습니다.

마우스 이동 중에 여러 번 실행되므로 mousemove에 주의하십시오. 스크롤링을 분석 할 때 더 자세히 이야기 할 조절을 적용해야 합니다.

eventh 핸들러 내부에 있으면 많은 속성에 액세스 할 수 있습니다.

예를 들어 마우스 이벤트에서 이벤트 객체의 button 속성을 확인하여 어떤 마우스 버튼을 눌렀는지 확인할 수 있습니다.

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

사용할 수 있는 모든 속성은 다음과 같습니다.

• altKey 이벤트가 시작될 때 Alt 키를 누르면 true
• button 마우스 이벤트가 발생했을 때 눌려진 버튼의 번호입니다 (보통 0 = 메인 버튼, 1 = 중간 버튼, 2 = 오른쪽 버튼). 버튼을 클릭하여 발생하는 이벤트 (예 : 클릭)에서 작동
• buttons 있는 경우 마우스 이벤트에서 누른 버튼을 나타내는 숫자입니다.
• clientX / clientY 스크롤에 관계없이 브라우저 창에 대한 마우스 포인터의 x 및 y 좌표
• ctrlKey 이벤트가 시작될 때 Ctrl 키를 누르면 true
• metaKey 이벤트가 시작될 때 메타 키를 누르면 true
• movementX / movementY 마지막 mousemove 이벤트의 위치를 ​​기준으로 한 마우스 포인터의 x 및 y 좌표 마우스 속도를 추적하면서 마우스 속도를 추적하는 데 사용
• region Canvas API에서 사용
• relatedTarget 이벤트의 보조 타겟 (예 : 이동시)
• screenX / screenY 화면 좌표에서의 마우스 포인터의 x 및 y 좌표
• shiftKey 이벤트가 시작될 때 Shift 키를 누르면 true