diff options
Diffstat (limited to 'files/ko/web/api/event/index.md')
| -rw-r--r-- | files/ko/web/api/event/index.md | 323 |
1 files changed, 119 insertions, 204 deletions
diff --git a/files/ko/web/api/event/index.md b/files/ko/web/api/event/index.md index 04c4bc5695..15de863b26 100644 --- a/files/ko/web/api/event/index.md +++ b/files/ko/web/api/event/index.md @@ -2,211 +2,126 @@ title: Event slug: Web/API/Event tags: - - API - - DOM - - Event - Interface - Reference - - UI - - 이벤트 +browser-compat: api.Event 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> +{{APIRef("DOM")}} + +**`Event`** 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. + +이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}로 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다. + +이벤트에는 다양한 종류가 있으며 일부는 `Event` 인터페이스의 파생 인터페이스를 사용합니다. `Event` 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다. + +많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 {{domxref("EventTarget.addEventListener()")}}를 사용해서 다양한 요소(`<button>`, `<div>`, `<span>`, 등등)에 "부착"합니다. 올바르게 부착한 경우, {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}를 사용하면 반대로 제거할 수도 있습니다. + +> **참고:** 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다. + +중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 [이벤트 버블링과 캡처](/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) 설정에 따라 달라집니다. + +## Event 기반 인터페이스 + +다음은 `Event` 인터페이스에서 파생된 인터페이스의 목록입니다. + +모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다. + +- {{domxref("AnimationEvent")}} +- {{domxref("AudioProcessingEvent")}} +- {{domxref("BeforeUnloadEvent")}} +- {{domxref("BlobEvent")}} +- {{domxref("ClipboardEvent")}} +- {{domxref("CloseEvent")}} +- {{domxref("CompositionEvent")}} +- {{domxref("CustomEvent")}} +- {{domxref("DeviceMotionEvent")}} +- {{domxref("DeviceOrientationEvent")}} +- {{domxref("DeviceProximityEvent")}} +- {{domxref("DragEvent")}} +- {{domxref("ErrorEvent")}} +- {{domxref("FetchEvent")}} +- {{domxref("FocusEvent")}} +- {{domxref("FormDataEvent")}} +- {{domxref("GamepadEvent")}} +- {{domxref("HashChangeEvent")}} +- {{domxref("HIDInputReportEvent")}} +- {{domxref("IDBVersionChangeEvent")}} +- {{domxref("InputEvent")}} +- {{domxref("KeyboardEvent")}} +- {{domxref("MediaStreamEvent")}} +- {{domxref("MessageEvent")}} +- {{domxref("MouseEvent")}} +- {{domxref("MutationEvent")}} +- {{domxref("OfflineAudioCompletionEvent")}} +- {{domxref("PageTransitionEvent")}} +- {{domxref("PaymentRequestUpdateEvent")}} +- {{domxref("PointerEvent")}} +- {{domxref("PopStateEvent")}} +- {{domxref("ProgressEvent")}} +- {{domxref("RTCDataChannelEvent")}} +- {{domxref("RTCPeerConnectionIceEvent")}} +- {{domxref("StorageEvent")}} +- {{domxref("SubmitEvent")}} +- {{domxref("SVGEvent")}} +- {{domxref("TimeEvent")}} +- {{domxref("TouchEvent")}} +- {{domxref("TrackEvent")}} +- {{domxref("TransitionEvent")}} +- {{domxref("UIEvent")}} +- {{domxref("UserProximityEvent")}} +- {{domxref("WebGLContextEvent")}} +- {{domxref("WheelEvent")}} + +## 생성자 + +- {{domxref("Event.Event", "Event()")}} + - : `Event` 객체를 생성하고 반환합니다. + +## 속성 + +- {{domxref("Event.bubbles")}} {{readonlyinline}} + - : 이벤트가 DOM을 타고 버블링되는지 나타냅니다. +- {{domxref("Event.cancelable")}} {{readonlyinline}} + - : 이벤트를 취소할 수 있는지 나타냅니다. +- {{domxref("Event.composed")}} {{ReadOnlyInline}} + - : 이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링할 수 있는지 나타내는 불리언입니다. +- {{domxref("Event.currentTarget")}} {{readonlyinline}} + - : 이벤트의 현재 대상, 즉 이벤트의 전파 과정 중 이벤트가 현재 위치한 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다. +- {{domxref("Event.defaultPrevented")}} {{readonlyinline}} + - : 이벤트의 {{domxref("event.preventDefault()")}} 호출이 이벤트를 취소했는지 나타냅니다. +- {{domxref("Event.eventPhase")}} {{readonlyinline}} + - : 이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다. `NONE`, `CAPTURIING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` 중 하나입니다. +- {{domxref("Event.isTrusted")}} {{readonlyinline}} + - : 이벤트가 (사용자 클릭 등으로 인해) 브라우저에 의해 초기화됐는지, (생성자 등) 스크립트에 의해 초기화됐는지 나타냅니다. +- {{domxref("Event.target")}} {{readonlyinline}} + - : 이벤트가 처음에 발생한 대상을 가리킵니다. +- {{domxref("Event.timeStamp")}} {{readonlyinline}} + - : 이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은 {{domxref("DOMHighResTimeStamp")}}를 반환합니다. +- {{domxref("Event.type")}} {{readonlyinline}} + - : 이벤트의 이름입니다. 대소문자를 구분하지 않습니다. + +## 메서드 + +- {{domxref("Event.composedPath()")}} + - : 이벤트의 경로, 즉 수신기가 발동했거나 발동할 모든 객체의 배열을 반환합니다. 섀도 루트의 {{domxref("ShadowRoot.mode")}}가 `closed`인 경우 섀도 트리의 노드는 포함하지 않습니다. +- {{domxref("Event.preventDefault()")}} + - : 취소 가능한 경우 이벤트를 취소합니다. +- {{domxref("Event.stopImmediatePropagation()")}} + - : 이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 후속으로 호출할 수신기의 발동도 막습니다. +- {{domxref("Event.stopPropagation()")}} + - : 이벤트의 DOM 내 추가 전파를 방지합니다. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 사용 가능한 이벤트 유형 목록: [이벤트 참고서](/ko/docs/Web/Events) +- [이벤트 대상의 비교](/ko/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`) +- [이벤트 생성 및 발동](/ko/docs/Web/Events/Creating_and_triggering_events) |