diff options
Diffstat (limited to 'files/ko/web/api/event/index.html')
| -rw-r--r-- | files/ko/web/api/event/index.html | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/files/ko/web/api/event/index.html b/files/ko/web/api/event/index.html new file mode 100644 index 0000000000..04c4bc5695 --- /dev/null +++ b/files/ko/web/api/event/index.html @@ -0,0 +1,212 @@ +--- +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><button></code>, <code><div></code>, <code><span></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> |