---
title: Event
slug: Web/API/Event
tags:
  - API
  - DOM
  - Event
  - Interface
  - Reference
  - UI
  - 이벤트
translation_of: Web/API/Event
---
<p>{{ APIRef("DOM") }}</p>

<p><strong><code>Event</code></strong> 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.</p>

<p>이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.</p>

<p>이벤트의 종류는 다양하며 일부는 <code>Event</code> 인터페이스의 파생 인터페이스를 사용합니다. <code>Event</code> 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.</p>

<p>많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 {{domxref("EventTarget.addEventListener()")}}를 사용해 다양한 요소(<code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}로 제거할 수도 있습니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong> 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.</p>
</div>

<p>중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">이벤트 확산과 캡처</a> 설정에 따라 달라집니다.</p>

<h2 id="Event_기반_인터페이스">Event 기반 인터페이스</h2>

<p>다음은 <code>Event</code> 인터페이스에서 파생된 인터페이스의 목록입니다.</p>

<p>모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.</p>

<div class="index">
<ul>
 <li>
  <div class="index">
  <ul>
   <li>{{domxref("AnimationEvent")}}</li>
   <li>{{domxref("AudioProcessingEvent")}}</li>
   <li>{{domxref("BeforeInputEvent")}}</li>
   <li>{{domxref("BeforeUnloadEvent")}}</li>
   <li>{{domxref("BlobEvent")}}</li>
   <li>{{domxref("ClipboardEvent")}}</li>
   <li>{{domxref("CloseEvent")}}</li>
   <li>{{domxref("CompositionEvent")}}</li>
   <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
   <li>{{domxref("CustomEvent")}}</li>
   <li>{{domxref("DeviceLightEvent")}}</li>
   <li>{{domxref("DeviceMotionEvent")}}</li>
   <li>{{domxref("DeviceOrientationEvent")}}</li>
   <li>{{domxref("DeviceProximityEvent")}}</li>
   <li>{{domxref("DOMTransactionEvent")}}</li>
   <li>{{domxref("DragEvent")}}</li>
   <li>{{domxref("EditingBeforeInputEvent")}}</li>
   <li>{{domxref("ErrorEvent")}}</li>
   <li>{{domxref("FetchEvent")}}</li>
   <li>{{domxref("FocusEvent")}}</li>
   <li>{{domxref("GamepadEvent")}}</li>
   <li>{{domxref("HashChangeEvent")}}</li>
   <li>{{domxref("IDBVersionChangeEvent")}}</li>
   <li>{{domxref("InputEvent")}}</li>
   <li>{{domxref("KeyboardEvent")}}</li>
   <li>{{domxref("MediaStreamEvent")}}</li>
   <li>{{domxref("MessageEvent")}}</li>
   <li>{{domxref("MouseEvent")}}</li>
   <li>{{domxref("MutationEvent")}}</li>
   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
   <li>{{domxref("OverconstrainedError")}}</li>
   <li>{{domxref("PageTransitionEvent")}}</li>
   <li>{{domxref("PaymentRequestUpdateEvent")}}</li>
   <li>{{domxref("PointerEvent")}}</li>
   <li>{{domxref("PopStateEvent")}}</li>
   <li>{{domxref("ProgressEvent")}}</li>
   <li>{{domxref("RelatedEvent")}}</li>
   <li>{{domxref("RTCDataChannelEvent")}}</li>
   <li>{{domxref("RTCIdentityErrorEvent")}}</li>
   <li>{{domxref("RTCIdentityEvent")}}</li>
   <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
   <li>{{domxref("SensorEvent")}}</li>
   <li>{{domxref("StorageEvent")}}</li>
   <li>{{domxref("SVGEvent")}}</li>
   <li>{{domxref("SVGZoomEvent")}}</li>
   <li>{{domxref("TimeEvent")}}</li>
   <li>{{domxref("TouchEvent")}}</li>
   <li>{{domxref("TrackEvent")}}</li>
   <li>{{domxref("TransitionEvent")}}</li>
   <li>{{domxref("UIEvent")}}</li>
   <li>{{domxref("UserProximityEvent")}}</li>
   <li>{{domxref("WebGLContextEvent")}}</li>
   <li>{{domxref("WheelEvent")}}</li>
  </ul>
  </div>
 </li>
</ul>
</div>

<h2 id="생성자">생성자</h2>

<dl>
 <dt>{{domxref("Event.Event", "Event()")}}</dt>
 <dd><code>Event</code> 객체를 생성하고 반환합니다.</dd>
</dl>

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

<dl>
 <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
 <dd>이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.</dd>
 <dt>{{domxref("Event.cancelBubble")}}</dt>
 <dd>{{domxref("Event.stopPropagation()")}}의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 <code>true</code>로 설정하면 더 이상의 확산을 막습니다.</dd>
 <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
 <dd>이벤트를 취소할 수 있는지 나타냅니다.</dd>
 <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
 <dd>이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.</dd>
 <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
 <dd>이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.</dd>
 <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
 <dd>이벤트가 확산하며 거쳐간 DOM {{domxref("Node")}}의 {{jsxref("Array")}}입니다.</dd>
 <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
 <dd>이벤트의 {{domxref("event.preventDefault()")}}가 호출됐는지를 나타냅니다.</dd>
 <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
 <dd>처리 중인 이벤트 흐름의 단계를 나타냅니다.</dd>
 <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)</dd>
 <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)</dd>
 <dt>{{domxref("Event.returnValue")}}</dt>
 <dd>Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 {{domxref("Event.preventDefault()")}}와 {{domxref("Event.defaultPrevented")}}를 사용해야 하지만, 원하면 <code>returnValue</code>를 사용할 수 있습니다.</dd>
 <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
 <dd>구버전 Internet Explorer에서 사용한 {{domxref("Event.target")}}의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.</dd>
 <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
 <dd>이벤트가 처음에 발생했던 대상의 참조입니다.</dd>
 <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
 <dd>이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 {{domxref("DOMHighResTimeStamp")}}로 바꾸는 작업이 진행 중입니다.</dd>
 <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
 <dd>이벤트의 이름입니다. 대소문자를 구분하지 않습니다.</dd>
 <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
 <dd>이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 {{domxref("Event.initEvent()")}} 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.</dd>
</dl>

<div class="hidden">
<h3 id="Obsolete_properties">Obsolete properties</h3>

<dl>
 <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
 <dd>Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)</dd>
</dl>
</div>

<h2 id="메서드">메서드</h2>

<dl>
 <dt>{{domxref("Event.composedPath()")}}</dt>
 <dd>이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 {{domxref("ShadowRoot.mode")}}가 <code>closed</code>인 경우 섀도우 트리의 노드는 포함하지 않습니다.</dd>
 <dt>{{domxref("Event.preventDefault()")}}</dt>
 <dd>취소 가능한 경우 이벤트를 취소합니다.</dd>
 <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
 <dd>이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.</dd>
 <dt>{{domxref("Event.stopPropagation()")}}</dt>
 <dd>이벤트의 DOM 내 추가 확산을 방지합니다.</dd>
</dl>

<div class="hidden">
<h3 id="더_이상_사용되지_않는_메소드">더 이상 사용되지 않는 메소드</h3>

<dl>
 <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
 <dd>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</dd>
 <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
 <dd>생성된 이벤트의 값을 초기화합니다. 이벤트가 이미 디스패치되고 있다면, 이 메소드는 아무것도 하지 않습니다.</dd>
 <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
 <dd>{{domxref("Event.defaultPrevented")}}의 값을 반환합니다.</dd>
 <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
 <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
 <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
 <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
</dl>
</div>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th>명세</th>
   <th>상태</th>
   <th>코멘트</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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



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

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

<ul>
 <li>사용 가능한 이벤트 유형: <a href="/ko/docs/Web/Events">이벤트 참고서</a></li>
 <li><a href="/ko/docs/Web/API/Event/Comparison_of_Event_Targets">이벤트 대상의 비교</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
</ul>