Revision 457551 of CustomEvent

  • Revision slug: Web/API/CustomEvent
  • Revision title: CustomEvent
  • Revision id: 457551
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment

Revision Content

The DOM CustomEvent are events initialized by an application for any purpose.

Method overview

void initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

Attributes

Attribute Type Description
detail any The data passed when initializing the event.

Methods

initCustomEvent()

Initializes the event in a manner analogous to the similarly-named method in the DOM Events interfaces.

void initCustomEvent(
  in DOMString type,
  in boolean canBubble,
  in boolean cancelable,
  in any detail
);

Parameters

type
The name of the event.
canBubble
A boolean indicating whether the event bubbles up through the DOM or not.
cancelable
A boolean indicating whether the event is cancelable.
detail
The data passed when initializing the event.

Constructor

The DOM4 specification has added support for the CustomEvent constructor.

CustomEvent(
  DOMString type,
  optional CustomEventInit eventInitDict
)

Parameters

type
The name of the event.
eventInitDict
An object which provides properties for the event. Check out CustomEventInit section for details.

CustomEventInit

bubbles
A boolean indicating whether the event bubbles up through the DOM or not. (default: false)
cancelable
A boolean indicating whether the event is cancelable. (default: false)
detail
The data passed when initializing the event.

CustomEvent example usage

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} 6 9 {{ CompatUnknown() }} {{ CompatVersionUnknown() }} (533.3)
CustomEvent() constructor 15 11 {{ CompatNo() }} 11.60 {{ CompatNightly() }} (535.2)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

It's represented by the {{ interface("nsIDOMCustomEvent") }} interface, which extends the {{ interface("nsIDOMEvent") }} interface.

Polyfill

You can polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and 10 with the following code:

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.CustomEvent.prototype;

  window.CustomEvent = CustomEvent;
})();

See also

Specification

  • {{ spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-customevent","DOM4 : Interface CustomEvent","ED") }}
  • {{ spec("http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#interface-CustomEvent","DOM Level 3 Events : CustomEvent","WD") }}

{{ languages( {"zh-cn": "zh-cn/DOM/Event/CustomEvent" } ) }}

Revision Source

<p>The DOM <code>CustomEvent</code> are events initialized by an application for any purpose.</p>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="#initCustomEvent()">initCustomEvent</a>(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Attribute</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>detail</code></td>
      <td><code>any</code></td>
      <td>The data passed when initializing the event.</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods" name="Methods">Methods</h2>
<h3 id="initCustomEvent()" name="initCustomEvent()">initCustomEvent()</h3>
<p>Initializes the event in a manner analogous to the similarly-named method in the DOM Events interfaces.</p>
<pre class="eval">
void initCustomEvent(
  in DOMString type,
  in boolean canBubble,
  in boolean cancelable,
  in any detail
);
</pre>
<h4 id="Parameters" name="Parameters">Parameters</h4>
<dl>
  <dt>
    <code>type</code></dt>
  <dd>
    The name of the event.</dd>
  <dt>
    <code>canBubble</code></dt>
  <dd>
    A boolean indicating whether the event bubbles up through the DOM or not.</dd>
  <dt>
    <code>cancelable</code></dt>
  <dd>
    A boolean indicating whether the event is cancelable.</dd>
  <dt>
    <code>detail</code></dt>
  <dd>
    The data passed when initializing the event.</dd>
</dl>
<h2 id="Constructor">Constructor</h2>
<p>The <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM4 specification</a> has added support for the <code>CustomEvent</code> constructor.</p>
<pre>
CustomEvent(
  DOMString type,
  optional CustomEventInit eventInitDict
)
</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
  <dt>
    <code>type</code></dt>
  <dd>
    The name of the event.</dd>
  <dt>
    <code>eventInitDict</code></dt>
  <dd>
    An object which provides properties for the event. Check out <a href="#CustomEventInit">CustomEventInit</a> section for details.</dd>
</dl>
<h4 id="CustomEventInit" name="CustomEventInit">CustomEventInit</h4>
<dl>
  <dt>
    <code>bubbles</code></dt>
  <dd>
    A boolean indicating whether the event bubbles up through the DOM or not. (default: <code>false</code>)</dd>
  <dt>
    <code>cancelable</code></dt>
  <dd>
    A boolean indicating whether the event is cancelable. (default: <code>false</code>)</dd>
  <dt>
    <code>detail</code></dt>
  <dd>
    The data passed when initializing the event.</dd>
</dl>
<h3 id="CustomEvent_example_usage" name="CustomEvent_example_usage">CustomEvent example usage</h3>
<p><!-- copied from the DOM4 spec Editor's Draft, which is licensed under CC0 --></p>
<pre>
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>6</td>
        <td>9</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }} (533.3)</td>
      </tr>
      <tr>
        <td><code>CustomEvent()</code> constructor</td>
        <td>15</td>
        <td>11</td>
        <td>{{ CompatNo() }}</td>
        <td>11.60</td>
        <td>{{ CompatNightly() }} (535.2)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>It's represented by the {{ interface("nsIDOMCustomEvent") }}&nbsp;interface, which extends the {{ interface("nsIDOMEvent") }} interface.</p>
<h2 id="Polyfill">Polyfill</h2>
<p>You can polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and 10 with the following code:</p>
<pre class="brush: js">
(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.CustomEvent.prototype;

  window.CustomEvent = CustomEvent;
})();</pre>
<h2 name="Specification">See also</h2>
<ul>
  <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
  <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
</ul>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li>{{ spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-customevent","DOM4 : Interface CustomEvent","ED") }}</li>
  <li>{{ spec("http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#interface-CustomEvent","DOM Level 3 Events : CustomEvent","WD") }}</li>
</ul>
<p>{{ languages( {"zh-cn": "zh-cn/DOM/Event/CustomEvent" } ) }}</p>
Revert to this revision