CustomEvent 인터페이스는 어플리케이션의 어떤 목적에 의해 초기화된 이벤트를 나타냅니다.

주의: 이 기능은 Web Worker에서 사용할 수 있습니다


CustomEvent 를 생성합니다.


CustomEvent.detail (en-US) Read only
이벤트 초기화에 전달되는 모든 데이터.

이 인터페이스는 그 부모인 Event 로부터 프로퍼티를 상속받습니다:

Event.bubbles Read only

A boolean indicating whether or not the event bubbles up through the DOM.


A historical alias to Event.stopPropagation(). Setting its value to true before returning from an event handler prevents propagation of the event.

Event.cancelable Read only

A boolean indicating whether the event is cancelable.

Event.composed Read only

A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

Event.currentTarget Read only

A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.


An Array of DOM Nodes through which the event has bubbled.

Event.defaultPrevented Read only

Indicates whether or not the call to event.preventDefault() canceled the event.

Event.eventPhase Read only

Indicates which phase of the event flow is being processed.

Event.explicitOriginalTarget Read only

The explicit original target of the event (Mozilla-specific.)

Event.originalTarget Read only

The original target of the event, before any retargetings. (Mozilla-specific.)


A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use Event.preventDefault() and Event.defaultPrevented instead, but you can use returnValue if you choose to do so.


A non-standard alias (from old versions of Microsoft Internet Explorer) for Some other browsers are starting to support it for web compatibility purposes. Read only

A reference to the target to which the event was originally dispatched.

Event.timeStamp Read only

The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.

Event.type Read only

The name of the event. Case-insensitive.

Event.isTrusted Read only

Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like Event.initEvent).

Deprecated properties

Event.scoped Read only

A boolean value indicating whether the given event will bubble across through the shadow root into the standard DOM. Use composed instead.


CustomEvent.initCustomEvent() (en-US)

CustomEvent 객체를 초기화합니다. 이벤트가 이미 디스패치되었다면, 이 메소드는 아무것도 하지 않습니다.

이 인터페이스는 그 부모인 Event 로부터 메소드를 상속받습니다:

{{Page("/ko/docs/Web/API/Event", "Methods")}}


명세 상태 코멘트
The definition of 'CustomEvent' in that specification.
Living Standard 초기 정의.

브라우저 호환성

BCD tables only load in the browser


권한 코드에서 비권한 코드로 실행

CustomEvent 를 권한 코드(예, 확장 기능)에서 비권한 코드(예, 웹페이지)로 실행할 때, 보안 문제를 고려해야 합니다. Firefox 와 다른 Gecko 어플리케이션은 한 컨텍스트에서 생성된 객체가 다른 곳에서 바로 사용되는 것을 제한하여 보안상의 문제를 자동으로 방지하지만, 이는 여러분의 코드가 예상한대로 실행되는 것을 제한하기도 합니다.

CustomEvent 객체는 반드시 동일한 에서 생성해야 합니다. CustomEvent 의 detail 속성도 동일하게 제한됩니다. String 과 Array 값은 제한 없이 그 컨텐츠를 읽을 수 있지만, 커스텀 객체는 그렇지 않습니다. 커스텀 객체를 사용할 때, Components.utils.cloneInto() 를 사용해 컨텐츠 스크립트에서 읽을 수 있는 객체의 속성을 정의해야 합니다.

// doc 은 컨텐츠 다큐먼트의 참조입니다
function dispatchCustomEvent(doc) {
  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);

함수 노출은 크롬 권한으로 실행하기 위한 컨텐츠 스크립트를 허용하여 보안 취약점에 열려있다는 점을 주의하시기 바랍니다.

함께 보기