정보실

웹학교

정보실

javascript 마우스 이벤트

본문

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

  • 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



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 27회 ]  작성일19-08-28 18:40

웹학교