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.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
click eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
On disabled form elementsChrome Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Edge No support NoFirefox No support NoIE Full support Yes
Notes
Full support Yes
Notes
Notes Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.
Opera Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari ? WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Edge Mobile No support NoFirefox Android No support NoOpera Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

최종 변경자: alattalatta,