Event

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.

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

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

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

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

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

Event 기반 인터페이스

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

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

생성자

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

속성

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

메서드

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

명세

명세 상태 코멘트
DOM
The definition of 'Event' in that specification.
Living Standard

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
EventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Event() constructorChrome Full support 15Edge Full support 12Firefox Full support 11IE No support NoOpera Full support 11.6Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 12Safari iOS Full support 6Samsung Internet Android Full support 1.0
bubblesChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cancelableChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cancelBubbleChrome Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Edge Full support 12Firefox Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
IE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Firefox Android Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari iOS Full support YesSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Samsung Internet 7.0 and Opera 45, setting this property to false does nothing, as per spec discussion.
composedChrome Full support 53Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 40Safari Full support YesWebView Android Full support 53Chrome Android Full support 53Firefox Android Full support 52Opera Android Full support 41Safari iOS Full support YesSamsung Internet Android Full support 6.0
composedPathChrome Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari Full support 10WebView Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Chrome Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Firefox Android Full support 52Opera Android Full support 41
Full support 41
No support 37 — 41
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari iOS Full support 10Samsung Internet Android Full support 6.0
Full support 6.0
No support 5.0 — 6.0
Alternate Name
Alternate Name Uses the non-standard name: deepPath
currentTargetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9
Full support 9
No support 6 — 9
Notes
Notes On Internet Explorer 6 through 8, the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent method. In this model, there is no equivalent to event.currentTarget and this is the global object. One solution to emulate the event.currentTarget feature is to wrap your handler in a function calling the handler using Function.prototype.call with the element as a first argument. This way, this will be the expected value.
Opera Full support 7Safari Full support 10WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 10Samsung Internet Android Full support 1.0
defaultPreventedChrome Full support 18Edge Full support 12Firefox Full support 6IE Full support 9Opera Full support 11Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0
eventPhaseChrome Full support 45Edge Full support 12Firefox Full support YesIE Full support 9Opera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0
explicitOriginalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
getPreventDefault
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
initEvent
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
isTrustedChrome Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Edge Full support 12Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes In Internet Explorer, all events are trusted except those that are created with the createEvent() method.
Opera Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari Full support 10WebView Android Full support 46
Notes
Full support 46
Notes
Notes Starting with version 53, untrusted events do not invoke the default action.
Chrome Android Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Firefox Android Full support YesOpera Android Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari iOS Full support 10Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Starting with Samsung Internet 6.0 and Opera 40, untrusted events do not invoke the default action.
originalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
preventBubble
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 24IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
preventCapture
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 24IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
preventDefaultChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
returnValue
Deprecated
Chrome Full support YesEdge Full support 12Firefox No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcElement
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 62IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 62Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
stopImmediatePropagationChrome Full support 6Edge Full support 12Firefox Full support 10IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 5Samsung Internet Android Full support 1.0
stopPropagationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
targetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
timeStampChrome Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
IE Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari Full support YesWebView Android Full support 49
Notes
Full support 49
Notes
Notes Starting with version 49, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Chrome Android Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Android Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari iOS Full support YesSamsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Starting with Samsung Internet 5.0, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
typeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

같이 보기