Element: click 이벤트

포인팅 장치의 포인터가 어느 요소 안에 위치하는 동안, 마우스 주 버튼처럼 장치의 버튼을 눌렀다 떼면 그 요소에서 click 이벤트가 발생합니다.

버튼을 누른 상태로 포인터가 움직여서 요소 밖으로 나가게 되면 버튼을 눌렀던 요소와 떨어진 요소의 가장 가까운 공통 조상 요소에서 이벤트가 발생합니다.

click은 mousedown (en-US)과 mouseup (en-US) 이벤트가 순서대로 발생한 후 발생합니다.

구문

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

addEventListener("click", (event) => {});

onclick = (event) => {};

이벤트 유형

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

Event UIEvent MouseEvent

이벤트 속성

UIEvent와 Event 인터페이스의 속성을 상속합니다.

MouseEvent.altKey (en-US) 읽기 전용

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

MouseEvent.button (en-US) 읽기 전용

(해당하는 경우) 마우스 이벤트를 발생시킨 버튼의 번호입니다.

MouseEvent.buttons (en-US) 읽기 전용

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

MouseEvent.clientX 읽기 전용

로컬 (DOM 콘텐츠) 좌표계에서 마우스 포인터의 X축 좌표입니다.

MouseEvent.clientY (en-US) 읽기 전용

로컬 (DOM 콘텐츠) 좌표계에서 마우스 포인터의 Y축 좌표입니다.

MouseEvent.ctrlKey (en-US) 읽기 전용

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

MouseEvent.layerX (en-US) 읽기 전용

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

MouseEvent.layerY (en-US) 읽기 전용

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

MouseEvent.metaKey (en-US) 읽기 전용

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

MouseEvent.movementX (en-US) 읽기 전용

마지막 mousemove (en-US) 이벤트로부터 마우스 포인터가 움직인 X축 거리입니다.

MouseEvent.movementY (en-US) 읽기 전용

마지막 mousemove (en-US) 이벤트로부터 마우스 포인터가 움직인 Y축 거리입니다.

MouseEvent.offsetX (en-US) 읽기 전용

대상 노드의 안쪽 여백 경계를 기준으로 한 마우스 포인터의 X축 좌표입니다.

MouseEvent.offsetY (en-US) 읽기 전용

대상 노드의 안쪽 여백 경계를 기준으로 한 마우스 포인터의 Y축 좌표입니다.

MouseEvent.pageX (en-US) 읽기 전용

전체 문서를 기준으로 한 마우스 포인터의 X축 좌표입니다.

MouseEvent.pageY (en-US) 읽기 전용

전체 문서를 기준으로 한 마우스 포인터의 Y축 좌표입니다.

MouseEvent.relatedTarget (en-US) 읽기 전용

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

MouseEvent.screenX (en-US) 읽기 전용

전역 (화면) 좌표계에서 마우스 포인터의 X축 좌표입니다.

MouseEvent.screenY (en-US) 읽기 전용

전역 (화면) 좌표계에서 마우스 포인터의 Y축 좌표입니다.

MouseEvent.shiftKey (en-US) 읽기 전용

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

MouseEvent.mozPressure 읽기 전용

터치 또는 태블릿에서 이 이벤트가 발생했을 때 적용된 입력 압력의 양입니다. 0.0(최소 압력)과 1.0(최대 압력) 사이의 값입니다. 사용을 권장하지 않는 비표준 속성입니다. PointerEvent (en-US)의 pressure (en-US) 속성을 사용하세요.

MouseEvent.mozInputSource (en-US) 읽기 전용

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

MouseEvent.webkitForce (en-US) 읽기 전용

클릭의 압력입니다.

MouseEvent.x (en-US) 읽기 전용

MouseEvent.clientX의 별칭입니다.

MouseEvent.y (en-US) 읽기 전용

MouseEvent.clientY (en-US)의 별칭입니다.

사용 일람

click 이벤트 처리기가 받는 MouseEvent 객체의 detail 속성은 target이 클릭된 횟수를 나타냅니다. 즉 더블 클릭의 detail은 2, 삼중 클릭은 3...처럼 계속됩니다. 이 횟수는 짧은 시간동안 클릭이 멈추면 초기화됩니다. 정확한 초기화 시간은 브라우저와 플랫폼에 따라 다르며, 사용자 설정에 따라서도 달라질 수 있습니다. 예를 들어, 접근성 옵션이 활성화되면 적응형 인터페이스로도 다중 클릭을 쉽게 할 수 있도록 초기화 시간이 길어질 수 있습니다.

예제

<button>을 몇 번이나 연속해서 클릭했는지 표시하는 예제입니다.

HTML

<button>클릭</button>

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `클릭 횟수: ${event.detail}`;
});

결과

버튼을 빠르게 반복하여 클릭해서 클릭 횟수를 올려보세요. 클릭을 쉬면 횟수가 초기화됩니다.

명세서

Specification
UI Events
# event-type-click
HTML Standard
# handler-onclick

브라우저 호환성

BCD tables only load in the browser

같이 보기