Element: click 이벤트
포인팅 장치의 포인터가 어느 요소 안에 위치하는 동안, 마우스 주 버튼처럼 장치의 버튼을 눌렀다 떼면 그 요소에서 click 이벤트가 발생합니다.
버튼을 누른 상태로 포인터가 움직여서 요소 밖으로 나가게 되면 버튼을 눌렀던 요소와 떨어진 요소의 가장 가까운 공통 조상 요소에서 이벤트가 발생합니다.
click은 mousedown (en-US)과 mouseup (en-US) 이벤트가 순서대로 발생한 후 발생합니다.
구문
이벤트 이름을 addEventListener() 등의 메서드에 제공하거나, 이벤트 처리기 속성을 사용하세요.
js
addEventListener("click", (event) => {});
onclick = (event) => {};
이벤트 유형
MouseEvent입니다. Event를 상속합니다.
이벤트 속성
UIEvent와 Event 인터페이스의 속성을 상속합니다.
MouseEvent.altKey(en-US) 읽기 전용-
마우스 이벤트 발생 시점에 alt가 눌려있었으면
true를 반환합니다. -
(해당하는 경우) 마우스 이벤트를 발생시킨 버튼의 번호입니다.
-
(버튼이 있는 경우) 마우스 이벤트 발생 시점에 누르고 있던 버튼 번호입니다.
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.screenX(en-US) 읽기 전용-
전역 (화면) 좌표계에서 마우스 포인터의 X축 좌표입니다.
MouseEvent.screenY(en-US) 읽기 전용-
전역 (화면) 좌표계에서 마우스 포인터의 Y축 좌표입니다.
MouseEvent.shiftKey(en-US) 읽기 전용-
마우스 이벤트 발생 시점에 shift가 눌려있었으면
true를 반환합니다. MouseEvent.mozPressure비표준 지원이 중단되었습니다 읽기 전용-
터치 또는 태블릿에서 이 이벤트가 발생했을 때 적용된 입력 압력의 양입니다.
0.0(최소 압력)과1.0(최대 압력) 사이의 값입니다. 사용을 권장하지 않는 비표준 속성입니다.PointerEvent의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
html
<button>클릭</button>
JavaScript
js
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