Event
=====

**`Event`** 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.

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

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

많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 `EventTarget.addEventListener()`를 사용해 다양한 요소(`<button>`, `<div>`, `<span>`, 등등)에 연결("부착")됩니다. 올바르게 부착한 경우, `removeEventListener()`를 사용하면 반대로 제거할 수도 있습니다.

**참고:** 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다.

중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 버블링과 캡처 설정에 따라 달라집니다.

Event 기반 인터페이스
--------------

다음은 `Event` 인터페이스에서 파생된 인터페이스의 목록입니다. 링크를 클릭해서 MDN API 참조서의 개별 페이지를 방문할 수 있습니다.

모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다.

* `AnimationEvent`
* `AudioProcessingEvent` (en-US) 
지원이 중단되었습니다
* `BeforeUnloadEvent` (en-US)
* `BlobEvent` (en-US)
* `ClipboardEvent`
* `CloseEvent` (en-US)
* `CompositionEvent` (en-US)
* `CustomEvent`
* `DeviceMotionEvent` (en-US)
* `DeviceOrientationEvent` (en-US)
* `DeviceProximityEvent` 
지원이 중단되었습니다
* `DragEvent` (en-US)
* `ErrorEvent` (en-US)
* `FetchEvent` (en-US)
* `FocusEvent` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `FormDataEvent` (en-US)
* `GamepadEvent` (en-US)
* `HashChangeEvent` (en-US)
* `HIDInputReportEvent` (en-US)
* `IDBVersionChangeEvent` (en-US)
* `InputEvent`
* `KeyboardEvent`
* `MediaStreamEvent` (en-US) 
지원이 중단되었습니다
* `MessageEvent`
* `MouseEvent`
* `MutationEvent` (en-US) 
지원이 중단되었습니다
* `OfflineAudioCompletionEvent` (en-US)
* `PageTransitionEvent` (en-US)
* `PaymentRequestUpdateEvent` (en-US)
* `PointerEvent`
* `PopStateEvent` (en-US)
* `ProgressEvent` (en-US)
* `RTCDataChannelEvent`
* `RTCPeerConnectionIceEvent` (en-US)
* `StorageEvent`
* `SubmitEvent` (en-US)
* `SVGEvent` (en-US) 
지원이 중단되었습니다
* `TimeEvent` (en-US)
* `TouchEvent` (en-US)
* `TrackEvent` (en-US)
* `TransitionEvent` (en-US)
* `UIEvent`
* `UserProximityEvent` 
지원이 중단되었습니다
* `WebGLContextEvent` (en-US)
* `WheelEvent` (en-US)
생성자
---

`Event()`

`Event` 객체를 생성하고 반환합니다.

인스턴스 속성
-------

`Event.bubbles` 읽기 전용

이벤트가 DOM을 타고 버블링되는지 나타내는 불리언입니다.

`Event.cancelable` 읽기 전용

이벤트를 취소할 수 있는지 나타내는 불리언입니다.

`Event.composed` (en-US) 읽기 전용

이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링되는지 나타내는 불리언입니다.

`Event.currentTarget` (en-US) 읽기 전용

이벤트의 현재 대상입니다. 이벤트 전파 과정 중 지금 이벤트를 수신 중인 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다.

`Event.defaultPrevented` 읽기 전용

`event.preventDefault()`의 호출로 이벤트가 취소됐는지 나타냅니다.

`Event.eventPhase` 읽기 전용

이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다. `NONE`, `CAPTURIING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` 중 하나의 숫자입니다.

`Event.isTrusted` 읽기 전용

이벤트가 사용자 클릭 등으로 브라우저에 의해 시작됐는지, 이벤트 생성 메서드 등 스크립트에 의해 시작됐는지 나타냅니다.

`Event.target` 읽기 전용

이벤트가 처음에 발생한 대상을 가리킵니다.

`Event.timeStamp` 읽기 전용

이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은 `DOMHighResTimeStamp` (en-US)를 반환합니다.

`Event.type` 읽기 전용

이벤트의 이름입니다. 대소문자를 구분하지 않습니다.

인스턴스 메서드
--------

`Event.composedPath()` (en-US)

이벤트의 경로(수신기가 발동할 객체들의 배열)를 반환합니다. 섀도 루트의 `ShadowRoot.mode` (en-US)가 `closed`면 섀도 트리의 노드는 포함하지 않습니다.

`Event.preventDefault()`

취소 가능한 이벤트를 취소합니다.

`Event.stopImmediatePropagation()`

이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 뒤이어 도달할 수신기들도 호출되지 않습니다.

`Event.stopPropagation()`

이벤트의 DOM 전파를 멈춥니다.

명세서
---

| Specification |
| --- |
| DOM Standard # interface-event |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 사용 가능한 이벤트 유형 목록: 이벤트 참고서 (en-US)
* 이벤트 대상의 비교 (en-US) (`target` vs. `currentTarget` vs. `relatedTarget` vs `originalTarget`)
* 이벤트 생성 및 발동