Revision 1072932 of CustomEvent

<p>{{APIRef("DOM")}}The <strong><code>CustomEvent</code></strong> interface represents events initialized by an application for any purpose.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
 <dd>Creates a <code>CustomEvent</code>.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
 <dd>Any data passed when initializing the event.</dd>
</dl>

<p><em>This interface inherits properties from its parent, </em>{{domxref("Event")}}.</p>

<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
 <dd>
 <p>Initializes a <code>CustomEvent</code> object. If the event has already being dispatched, this method does nothing.</p>
 </dd>
</dl>

<p><em>This interface inherits methods from its parent, </em>{{domxref("Event")}}.</p>

<p>{{Page("/en-US/docs/Web/API/Event", "Methods")}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="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>11</td>
   <td>5.1 (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>
  <tr>
   <td>Available in workers</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoDesktop(48)}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</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>
  <tr>
   <td>Available in workers</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoMobile(48)}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Firing_from_privileged_code_to_non-privileged_code">Firing from privileged code to non-privileged code</h2>

<p>When firing a CustomEvent from privileged code (i.e. an extension) to non-privileged code (i.e. a webpage), security issues should be considered. Firefox and other Gecko applications restrict an object created in one context from being directly used for&nbsp;another, which will&nbsp;automatically prevent security holes, but these restrictions may also prevent your code from running as expected.</p>

<p>While&nbsp;creating a CustomEvent object, you must create the object from the same <a href="/en-US/docs/XUL/window">window</a>. The&nbsp;<code>detail</code> attribute of your CustomEvent will be subjected to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. While using a custom Object, you will need to define the attributes of that object that are readable from the content script using <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>

<pre class="brush: js">
// doc is a reference to the content document
function dispatchCustomEvent(doc) {
  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
  doc.dispatchEvent(myEvent);
}</pre>

<p>But one needs to keep in mind that&nbsp;exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.</p>

<h2 id="See_also">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>
 <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
</ul>