---
title: CustomEvent
slug: Web/API/CustomEvent
tags:
  - API
  - DOM
  - Interfaz
  - Referencia
translation_of: Web/API/CustomEvent
---
<p>{{APIRef("DOM")}}La interfaz <strong><code>CustomEvent</code></strong>  representa eventos inicializados por una aplicación para cualquier propósito.</p>

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

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

<dl>
 <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
 <dd>
 <p>Crea un <code>CustomEvent</code>.</p>
 </dd>
</dl>

<h2 id="Propiedades">Propiedades</h2>

<dl>
 <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
 <dd>Cualquier dato transmitido al inicializar el evento.</dd>
</dl>

<p><em>Esta interfaz hereda las propiedades de su padre, </em>{{domxref("Event")}}:</p>

<p>{{Page("/es/docs/Web/API/Event", "Propiedades")}}</p>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
 <dd>
 <p>Inicializar un objeto <code>CustomEvent</code>. Si el evento ya ha sido enviado, este método no hace nada.</p>
 </dd>
</dl>

<p><em>Esta interfaz hereda los métodos de su padre, </em>{{domxref("Event")}}:</p>

<p>{{Page("/es/docs/Web/API/Event", "Métodos")}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>



<p>{{Compat("api.CustomEvent")}}</p>

<h2 id="Disparar_desde_código_privilegiado_a_código_no-privilegiado">Disparar desde código privilegiado a código no-privilegiado</h2>

<p>Al disparar un CustomEvent desde código privilegiado (una extensión) a un código no-privilegiado (una página web),  deben considerarse algunos problemas de seguridad. Firefox y otras aplicaciones Gecko restringen al objeto creado desde un contexto siendo directamente utilizado por otro, el cual automáticamente evitará los agujeros de seguridad, pero estas restricciones también pueden impedir que su código se ejecute como esperaba.</p>

<p>Al crear un objeto CustomEvent, debes crear el objeto desde la misma <a href="/en-US/docs/XUL/window">ventana</a>. El atributo <code>detail</code> de tu CustomEvent estará sujeto a las mismas restricciones. Los valores de String y Array serán legibles sin restricciones por el content, pero los objetos personalizados no lo harán. Al utilizar un objeto personalizado, necesitaras definir que atributos de ese objeto se pueden leer desde la secuencia de comandos de contenido usando  <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>

<pre class="brush: js">// doc es una referencia al contenido del documento
function dispatchCustomEvent(doc) {
  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
  doc.dispatchEvent(myEvent);
}</pre>

<p>Pero hay que tener en cuenta que exponer una función permitirá que el script content lo ejecute con privilegios de chrome, lo que puede abrir una vulnerabilidad de seguridad.</p>

<h2 id="Ver_también">Ver también</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">Interacción entre páginas privilegiadas y no privilegiadas</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="/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos">Creación y activación de eventos</a></li>
</ul>