Element: mousedown 이벤트

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

mousedown 이벤트는 포인터가 요소 안에 있는 동안 포인팅 장치의 버튼을 눌렀을 때 Element에서 발생합니다.

참고 : 이는 완전한 click 동작, 즉, 포인터가 같은 요소 안에 있으면서 마우스 버튼을 눌렀다가 떼는 동작 이후 발생하는 click 이벤트와는 차이가 있습니다. mousedown은 버튼을 처음 누른 순간 발생합니다.

구문

이벤트 이름을 addEventListener() 등의 메서드에 제공하거나, 이벤트 처리기 속성을 사용하세요.

js
addEventListener("mousedown", (event) => {});

onmousedown = (event) => {};

이벤트 유형

MouseEvent입니다. UIEvent와 Event를 상속합니다.

Event UIEvent MouseEvent

이벤트 속성

부모인 UIEvent와 Event의 속성을 상속합니다.

MouseEvent.altKey 읽기 전용

마우스 이벤트 발생 시점에 alt가 눌려있었으면 true를 반환합니다.

MouseEvent.button 읽기 전용

(해당하는 경우) 마우스 이벤트 발생 시점에 누르고 있던 버튼의 번호입니다.

MouseEvent.buttons 읽기 전용

(버튼이 있는 경우) 마우스 이벤트 발생 시점에 누르고 있던 버튼 번호입니다.

MouseEvent.clientX 읽기 전용

뷰포트 좌표계에서 마우스 포인터의 X 좌표입니다.

MouseEvent.clientY 읽기 전용

뷰포트 좌표계에서 마우스 포인터의 Y 좌표입니다.

MouseEvent.ctrlKey 읽기 전용

마우스 이벤트 발생 시점에 control이 눌려있었으면 true를 반환합니다.

MouseEvent.layerX 읽기 전용

이벤트의 가로축 좌표를 현재 레이어에 상대적인 값으로 반환합니다.

MouseEvent.layerY 읽기 전용

이벤트의 세로축 좌표를 현재 레이어에 상대적인 값으로 반환합니다.

MouseEvent.metaKey 읽기 전용

마우스 이벤트 발생 시점에 meta가 눌려있었으면 true를 반환합니다.

MouseEvent.movementX 읽기 전용

가장 최근 mousemove 이벤트에 상대적인 마우스 포인터의 X 좌표입니다.

MouseEvent.movementY 읽기 전용

가장 최근 mousemove 이벤트에 상대적인 마우스 포인터의 Y 좌표입니다.

MouseEvent.offsetX 읽기 전용

대상 노드의 안쪽 여백 경계에 상대적인 마우스 포인터의 X 좌표입니다.

MouseEvent.offsetY 읽기 전용

대상 노드의 안쪽 여백 경계에 상대적인 마우스 포인터의 Y 좌표입니다.

MouseEvent.pageX 읽기 전용

전제 문서에 상대적인 마우스 포인터의 X 좌표입니다.

MouseEvent.pageY 읽기 전용

전제 문서에 상대적인 마우스 포인터의 Y 좌표입니다.

MouseEvent.relatedTarget 읽기 전용

존재하는 경우, 이벤트의 보조 대상입니다.

MouseEvent.screenX 읽기 전용

화면 좌표계에서 마우스 포인터의 X 좌표입니다.

MouseEvent.screenY 읽기 전용

화면 좌표계에서 마우스 포인터의 Y 좌표입니다.

MouseEvent.shiftKey 읽기 전용

마우스 이벤트 발생 시점에 shift가 눌려있었으면 true를 반환합니다

MouseEvent.mozInputSource 읽기 전용

이벤트를 발생시킨 장치의 유형으로 MOZ_SOURCE_* 상수 중 하나입니다. 이 값을 사용하면 이벤트가 실제 마우스에 의해 발생했는지, 아니면 터치에 의해 발생했는지 확인해 정확도 보정 등을 적용할 수 있습니다.

MouseEvent.webkitForce 읽기 전용

클릭했을 때 가해진 압력의 양입니다.

MouseEvent.x 읽기 전용

MouseEvent.clientX의 별칭입니다.

MouseEvent.y 읽기 전용

MouseEvent.clientY의 별칭입니다.

예제

예제 코드를 mousemove 이벤트에서 확인하세요.

명세서

Specification
UI Events
# event-type-mousedown
HTML Standard
# handler-onmousedown

브라우저 호환성

BCD tables only load in the browser

같이 보기