click

click 이벤트는 포인팅 디바이스 버튼(일반적으로 마우스 기본 버튼)이 하나의 요소(엘리먼트)에서 눌려지고 놓을 때 시작합니다.

Interface	`MouseEvent`
Sync / Async	Sync
Bubbles	Yes
Cancelable	Yes
Target	`Element`
Composed	Yes
Default Action	Varies

속성

Property	Type	Description
`target` Read only	`EventTarget`	이벤트 타겟 (DOM 트리 내에서의 최상위 타겟).
`type` Read only	`DOMString`	이벤트의 타입.
`bubbles` Read only	`Boolean`	이벤트가 정상적으로 버블을 발생시키는지 여부
`cancelable` Read only	`Boolean`	이벤트 취소 가능 여부
`view` Read only	`WindowProxy`	`Document.defaultView` (문서의 `window`)
`detail` Read only	`long` (`float`)	짧은 시간 내에 발생한 연속 클릭 수로, 1씩 증가합니다.
`currentTarget` Read only	`EventTarget`	이벤트 리스너가 연결된 노드.
`relatedTarget` Read only	`EventTarget`	`ouseover`, `mouseout`, `mouseenter`, `mouseleave` 이벤트: 이벤트에 대한 보조 타겟 (`mouseenter` 의 경우는 `mouseleave` 타겟). 그렇지 않으면 `null을` 반환합니다.
`screenX` Read only	`long`	글로벌(스크린) 좌표에서 마우스 포인터의 X 좌표.
`screenY` Read only	`long`	글로벌(스크린) 좌표에서 마우스 포인터의 Y 좌표.
`clientX` Read only	`long`	로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표.
`clientY` Read only	`long`	로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표.
`button` Read only	`unsigned short`	마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1 (있다면), 오른쪽 버튼=2. 왼손잡이용 마우스의 경우 버튼 동작을 반대로하면, 값은 오른쪽에서 왼쪽으로 읽습니다.
`buttons` Read only	`unsigned short`	마우스 이벤트가 발생했을 때 눌려진 버튼: 왼쪽 버튼=1, 오른쪽 버튼=2, 가운데(휠) 버튼=4, 4번째 버튼(일반적으로 브라우저의 뒤로가기 버튼)=8, 5번째 버튼 (일반적으로 앞으로가기 버튼)=16. 두개 이상의 버튼을 누르면, 값의 논리합이 반환됩니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 누르면 3이 반환됩니다. (1 \| 2). 보다 자세한건 여기를 참조하세요.
`mozPressure` Read only	`float`	이벤트를 발생시킬 때 터치 또는 탭 장치에 적용되는 압력의 양; 이 값의 범위는 0.0(최소 압력)과 1.0(최대 압력) 사이 입니다.
`ctrlKey` Read only	`Boolean`	이벤트가 발생했을 때 컨트롤 키가 눌러져 있으면 `true` 그렇지 않으면 `false` 를 반환합니다.
`shiftKey` Read only	`Boolean`	이벤트가 발생했을 때 시프트 키가 눌러져 있으면 `true` 그렇지 않으면 `false` 를 반환합니다.
`altKey` Read only	`Boolean`	이벤트가 발생했을 때 알트 키가 눌러져 있으면 `true` 그렇지 않으면 `false` 를 반환합니다.
`metaKey` Read only	`Boolean`	이벤트가 발생했을 때 메타 키가 눌러져 있으면 `true` 그렇지 않으면 `false` 를 반환합니다.

예제

다음 예제는 <button>의 연속한 클릭 수를 표시합니다.

HTML

<button>Click</button>

JavaScript

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

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

결과

빠르고 반복적인 클릭으로 카운터를 늘려보세요. 클릭 중간에 쉬면 숫자가 초기화됩니다.

명세

Specification	Status	Comment
UI Events	Working Draft	Specifies this event as composed.
Document Object Model (DOM) Level 3 Events Specification The definition of 'click' in that specification.	Obsolete
Document Object Model (DOM) Level 2 Events Specification The definition of 'click' in that specification.	Obsolete	Initial definition.

브라우저 호환성

BCD tables only load in the browser