Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. 일부는 사용자가 생성한 것이고, 일부는 API 에 의해 생성된 것입니다(애니메이션의 실행 종료, 비디오의 일시정지 등을 나타내는 이벤트 등). 이벤트는 보통 "외부" 소스 같은것에 의해 실행되지만, 엘리먼트의 HTMLElement.click() 메소드를 호출하거나, 이벤트를 정의한 후 EventTarget.dispatchEvent() 을 사용해 지정한 타겟으로 전송하는 방식을 통해 프로그래밍적으로 호출될 수도 있습니다. 이벤트의 타입은 아주 많고, 일부는 메인 Event 인터페이스를 기반으로한 다른 인터페이스를 사용합니다. Event 자체는 모든 이벤트에 공통되는 속성과 메소드를 갖습니다.

많은 DOM 엘리먼트는 이런 이벤트를 허용(또는 "리슨")하고, 이를 처리(또는 "핸들")하기위한 응답에서 코드를 실행하도록 설정될 수 있습니다. 이벤트 핸들러는 보통 EventTarget.addEventListener() 를 사용해 다양한 HTML 엘리먼트(<button>, <div>, <span>, 등등)에 연결(또는 "첨부")될 수 있으며, 이는 일반적으로 오래된 이벤트 핸들러 속성 사용을 대체합니다. 완전히 동일한 이벤트에 대해서도 하나의 엘리먼트가 여러 핸들러를 가질 수 있음을 유의하세요. 각각이 독립적인 목적을 갖는 독립된 코드 모듈을 첨부하는 경우 특히 그렇습니다(예, 광고 모듈과 통계 모듈 모두를 갖고 비디오 관람을 모니터링하는 웹 페이지). 각각이 자신만의 이벤트 핸들러를 갖는 중첩된 엘리먼트가 많을 때, 이벤트 처리는 매우 복잡해질 수 있습니다. 특히 부모 엘리먼트와 자식 엘리먼트가 공간적으로 겹쳐있어 부모 엘리먼트가 그 자식 엘리먼트와 아주 유사한 이벤트를 수신하여 이벤트가 기술적으로 모두에게 발생하는 경우, 이벤트 처리 순서는 이벤트 핸들러 발생에 대한 이벤트 bubbling 과 capture 설정에따라 달라집니다.

Event 기반 인터페이스

아래는 메인 Event 인터페이스를 기반으로하는 인터페이스의 목록입니다. 각각은 MDN API 레퍼런스에서 해당되는 문서로의 링크를 갖고 있습니다. 이벤트 인터페이스는 이름이 모두 "Event" 로 끝난다는 것을 참고하세요.

생성자

Event()
Event 객체를 생성하고, 호출자에게 반환합니다.

속성

Event.bubbles Read only
이벤트가 DOM 을 거쳐 버블링되는지 여부를 나타내는 불리언.
Event.cancelBubble
역사적으로 Event.stopPropagation() 와 동일합니다. 이벤트의 전파를 방지하려면 이벤트 핸들러로부터 반환되기 전에 값을 true 로 설정하세요.
Event.cancelable Read only
이벤트가 취소될 수 있는지 여부를 나타내는 불리언.
Event.composed Read only
이벤트가 shadow 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
(오래된 버전의 Microsoft Internet Explorer 의)Event.target 과 동일한 비표준. 웹 호환성 목적을 위해 일부 다른 부라우저에서도 지원하기 시작했습니다.
Event.target Read only
이벤트가 원래 디스패치된 대상을 참조.
Event.timeStamp Read only
이벤트가 생성된 시간(밀리초). 명세에의하면, 이 값은 기원후의 시간이지만, 실제로는 브라우저의 정의가 다양합니다. 부가적으로, 이를 DOMHighResTimeStamp 로 변경하는 작업이 진행중입니다.
Event.type Read only
이벤트의 이름(대소문자 구별).
Event.isTrusted Read only
이벤트가 브라우저에의해 초기화되었는지(인스턴스에 대한 사용자의 클릭 이후) 스크립트에의해 초기화되었는지를(event.initEvent 와 같은 이벤트 생성 메소드를 사용) 나타냅니다.

더 이상 사용되지 않는 속성

Event.scoped Read only
주어진 이벤트가 shadow 루트에서 표준 DOM 으로 버블링되는지 여부를 나타내는 Boolean. 이 속성은 composed 로 이름이 변경되었습니다.

메소드

Event.createEvent()

새로운 이벤트를 생성합니다. 생성한 이벤트는 initEvent() 메서드로 초기화해야 합니다.

Event.composedPath()
이벤트의 패스(리스너가 호출될 객체)를 반환합니다. Shadow 트리의 ShadowRoot.mode 가 closed 로 생성된 경우, shadow 트리내의 노드는 포함되지 않습니다.
Event.initEvent()
생성된 이벤트의 값을 초기화합니다. 이벤트가 이미 디스패치되고 있다면, 이 메소드는 아무것도 하지 않습니다.
Event.preventDefault()
이벤트를 취소합니다(취소 가능한 경우에).
Event.stopImmediatePropagation()
이 특정 이벤트에 대해서는 다른 리스너가 호출되지 않습니다. 동일한 엘리먼트에 첨부된 것과 나중에 순회할(캡쳐 구문에서 인스턴스) 엘리먼트에 첨부된 것 모두에적용됩니다.
Event.stopPropagation()
DOM 내에서의 이벤트 전파를 중단합니다.

더 이상 사용되지 않는 메소드

Event.getPreventDefault()
비표준. Event.defaultPrevented 값을 반환합니다. 대신 Event.defaultPrevented 를 사용하세요.
Event.preventBubble() 안씀 Gecko 24
이벤트 버블링을 방지합니다. 더 이상 사용되지 않으므로, 대신 event.stopPropagation 을 사용하세요.
Event.preventCapture() 안씀 Gecko 24
더 이상 사용되지 않으므로, 대신 event.stopPropagation 을 사용하세요.

명세

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Event() constructorChrome Full support 15Edge Full support YesFirefox Full support 11IE No support NoOpera Full support 11.6Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 11.6Safari iOS Full support 6Samsung Internet Android ?
bubblesChrome Full support YesEdge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
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 YesFirefox 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.
Edge Mobile Full support YesFirefox 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 ?
cancelableChrome Full support YesEdge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
composedChrome Full support 53Edge ? Firefox Full support 52IE ? Opera Full support 40Safari ? WebView Android Full support 53Chrome Android Full support 53Edge Mobile ? Firefox Android Full support 52Opera Android Full support 40Safari iOS ? Samsung Internet Android ?
composedPathChrome Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge No support NoFirefox 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
Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari iOS Full support 10Samsung Internet Android ?
createEventChrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
currentTargetChrome Full support YesEdge Full support YesFirefox Full support YesIE 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 YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 10Samsung Internet Android ?
defaultPreventedChrome Full support 18Edge Full support YesFirefox Full support 6IE Full support 9Opera Full support 11Safari Full support 5WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android ?
eventPhaseChrome Full support 45Edge ? Firefox ? IE ? Opera Full support 32Safari ? WebView Android Full support 45Chrome Android Full support 45Edge Mobile ? Firefox Android ? Opera Android Full support 32Safari iOS ? Samsung Internet Android ?
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 NoEdge Mobile No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
getPreventDefault
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
Opera Android No support NoSafari iOS ? Samsung Internet Android ?
initEvent
Deprecated
Chrome Full support YesEdge Full support YesFirefox 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 YesEdge Mobile 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 ?
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 YesFirefox 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 No support NoWebView 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.
Edge Mobile Full support YesFirefox 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 No support NoSamsung Internet Android ?
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 NoEdge Mobile No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
preventBubble
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android ?
preventCapture
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android ?
preventDefaultChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
returnValue
Deprecated
Chrome Full support YesEdge Full support YesFirefox 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 YesEdge Mobile 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 ?
srcElement
Non-standard
Chrome Full support YesEdge Full support YesFirefox Full support 62IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 62Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
stopImmediatePropagationChrome Full support 6Edge Full support YesFirefox Full support 10IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 10Opera Android Full support 15Safari iOS Full support 5Samsung Internet Android ?
stopPropagationChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
targetChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
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 YesFirefox 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.
Edge Mobile Full support YesFirefox 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 ?
typeChrome Full support 45Edge ? Firefox ? IE ? Opera Full support 32Safari ? WebView Android Full support 45Chrome Android Full support 45Edge Mobile ? Firefox Android ? Opera Android Full support 32Safari iOS ? Samsung Internet Android ?

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.

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, cs09g, alattalatta, fscholz, jsx, teoli, pusanbear
최종 변경자: mdnwebdocs-bot,