Event
Event
인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.
이벤트는 마우스를 클릭하거나 키보드를 누르는 것과 같이 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API들이 생성할 수도 있습니다. 요소의 HTMLElement.click()
메서드를 호출하거나, 이벤트를 정의한 후 대상의 EventTarget.dispatchEvent()
메서드를 사용해 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다.
이벤트에는 다양한 종류가 있으며 일부는 Event
인터페이스의 파생 인터페이스를 사용합니다. Event
자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.
많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 EventTarget.addEventListener()
를 사용해 다양한 요소(<button>
, <div>
, <span>
, 등등)에 연결("부착")됩니다. 올바르게 부착한 경우, removeEventListener()
를 사용하면 반대로 제거할 수도 있습니다.
참고: 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다.
중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 버블링과 캡처 설정에 따라 달라집니다.
Event 기반 인터페이스
다음은 Event
인터페이스에서 파생된 인터페이스의 목록입니다. 링크를 클릭해서 MDN API 참조서의 개별 페이지를 방문할 수 있습니다.
모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다.
AnimationEvent
AudioProcessingEvent
지원이 중단되었습니다BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CustomEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
지원이 중단되었습니다DragEvent
ErrorEvent
FetchEvent
FocusEvent
FontFaceSetLoadEvent
FormDataEvent
GamepadEvent
HashChangeEvent
HIDInputReportEvent
IDBVersionChangeEvent
InputEvent
KeyboardEvent
MediaStreamEvent
지원이 중단되었습니다MessageEvent
MouseEvent
MutationEvent
지원이 중단되었습니다OfflineAudioCompletionEvent
PageTransitionEvent
PaymentRequestUpdateEvent
PointerEvent
PopStateEvent
ProgressEvent
RTCDataChannelEvent
RTCPeerConnectionIceEvent
StorageEvent
SubmitEvent
SVGEvent
지원이 중단되었습니다TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
UserProximityEvent
지원이 중단되었습니다WebGLContextEvent
WheelEvent
생성자
Event()
-
Event
객체를 생성하고 반환합니다.
인스턴스 속성
Event.bubbles
읽기 전용-
이벤트가 DOM을 타고 버블링되는지 나타내는 불리언입니다.
Event.cancelable
읽기 전용-
이벤트를 취소할 수 있는지 나타내는 불리언입니다.
Event.composed
읽기 전용-
이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링되는지 나타내는 불리언입니다.
Event.currentTarget
읽기 전용-
이벤트의 현재 대상입니다. 이벤트 전파 과정 중 지금 이벤트를 수신 중인 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다.
Event.defaultPrevented
읽기 전용-
event.preventDefault()
의 호출로 이벤트가 취소됐는지 나타냅니다. Event.eventPhase
읽기 전용-
이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다.
NONE
,CAPTURIING_PHASE
,AT_TARGET
,BUBBLING_PHASE
중 하나의 숫자입니다. Event.isTrusted
읽기 전용-
이벤트가 사용자 클릭 등으로 브라우저에 의해 시작됐는지, 이벤트 생성 메서드 등 스크립트에 의해 시작됐는지 나타냅니다.
Event.target
읽기 전용-
이벤트가 처음에 발생한 대상을 가리킵니다.
Event.timeStamp
읽기 전용-
이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은
DOMHighResTimeStamp
를 반환합니다. Event.type
읽기 전용-
이벤트의 이름입니다. 대소문자를 구분하지 않습니다.
인스턴스 메서드
Event.composedPath()
-
이벤트의 경로(수신기가 발동할 객체들의 배열)를 반환합니다. 섀도 루트의
ShadowRoot.mode
가closed
면 섀도 트리의 노드는 포함하지 않습니다. Event.preventDefault()
-
취소 가능한 이벤트를 취소합니다.
Event.stopImmediatePropagation()
-
이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 뒤이어 도달할 수신기들도 호출되지 않습니다.
Event.stopPropagation()
-
이벤트의 DOM 전파를 멈춥니다.
명세서
Specification |
---|
DOM Standard # interface-event |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- 사용 가능한 이벤트 유형 목록: 이벤트 참고서
- 이벤트 대상의 비교 (
target
vs.currentTarget
vs.relatedTarget
vsoriginalTarget
) - 이벤트 생성 및 발동