path: root/files/ko/web/api/element/click_event/index.html

---
title: click
slug: Web/API/Element/click_event
tags:
  - API
  - DOM
  - Event
  - Interface
  - Reference
translation_of: Web/API/Element/click_event
---
<div>{{APIRef}}</div>

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

<table class="properties">
 <tbody>
  <tr>
   <th>Interface</th>
   <td>{{domxref("MouseEvent")}}</td>
  </tr>
  <tr>
   <th>Sync / Async</th>
   <td>Sync</td>
  </tr>
  <tr>
   <th>Bubbles</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th>Cancelable</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th>Target</th>
   <td>{{domxref("Element")}}</td>
  </tr>
  <tr>
   <th>Composed</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th>Default Action</th>
   <td>Varies</td>
  </tr>
 </tbody>
</table>

<h2 id="속성">속성</h2>

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

<h2 id="예제">예제</h2>

<p>다음 예제는 {{htmlelement("button")}}의 연속한 클릭 수를 표시합니다.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;button&gt;Click&lt;/button&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">const button = document.querySelector('button');

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

<h3 id="결과">결과</h3>

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

<p>{{EmbedLiveSample("예제")}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('UI Events', '#event-type-click')}}</td>
   <td>{{Spec2('UI Events')}}</td>
   <td>Specifies this event as composed.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("api.Element.click_event")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
 <li>{{event("mousedown")}}</li>
 <li>{{event("mouseup")}}</li>
 <li>{{event("mousemove")}}</li>
 <li>{{event("click")}}</li>
 <li>{{event("dblclick")}}</li>
 <li>{{event("mouseover")}}</li>
 <li>{{event("mouseout")}}</li>
 <li>{{event("mouseenter")}}</li>
 <li>{{event("mouseleave")}}</li>
 <li>{{event("contextmenu")}}</li>
</ul>