Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

document.createEvent

 

Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo DOM:document.createEvent, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción


Resumen

Crea un event del tipo especificado. El objeto devuelto debe antes ser inicializado y puede, posteriormente, ser pasado a element.dispatchEvent.

Sintaxis

event =document.createEvent(type)
  • event es el objeto Event creado.
  • type es una cadena que representa el tipo de evento que se creará. Los tipos de evento posibles incluyes "UIEvents", "MouseEvents", "MutationEvents", y "HTMLEvents". Vea la sección Notas para más detalles.

Ejemplo

This article demonstrates how to create and dispatch events.

Creating custom events

Events can be created with the Event constructor as follows:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

This constructor is supported in most modern browsers (with Internet Explorer being the exception). For a more verbose approach (which works with Internet Explorer), see the old-fashioned way below.

Adding custom data – CustomEvent()

To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data.
For example, the event could be created as follows:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

This will then allow you to access the additional data in the event listener:

function eventHandler(e) {
  console.log('The time is: ' + e.detail);
}

The old-fashioned way

The older approach to creating events uses APIs inspired by Java. The following shows an example:

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

Triggering built-in events

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. View the example in action.

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 (Yes) Not supported 11.60 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? 6

See also

Notas

Las cadenas de tipo que pueden pasarse a createEvent están definidas enevent modules . Algunos módulos de eventos están definidas en las especificaciones DOM Events, algunos módulos están definidos en otras especificaciones (como SVG) y algunos tipos de eventos son específicos de Gecko. Ver la tabla más abajo para más detalles.

To-do: add event names to the table too.

Modulo de Eventos Tipo de evento para pasar a createEvent Método a usar para inicializar el evento
DOM Level 2 Events
User Interface event module "UIEvents" event.initUIEvent
Mouse event module "MouseEvents" event.initMouseEvent
Mutation event module "MutationEvents" event.initMutationEvent
HTML event module "HTMLEvents" event.initEvent
DOM Level 3 Events
Eventos de interfaz de usuario "UIEvent", "UIEvents" event.initUIEvent
eventos de ratón "MouseEvent", "MouseEvents" event.initMouseEvent
Mutation event module "MutationEvent", "MutationEvents" event.initMutationEvent
Mutation name event module (sin implementar en Gecko a Junio 2006) "MutationNameEvent" event.initMutationNameEvent
eventos de texto "TextEvent" (Gecko también implementa "TextEvents") event.initTextEvent
eventos de teclado "KeyboardEvent" (Gecko también implementa "KeyEvents") event.initKeyEvent (específico de Gecko; la especificación de eventos DOM 3 en desarrollo, usa initKeyboardEvent en su lugar)
eventos básicos "Event" (Gecko también implementa "Events") event.initEvent
SVG 1.1 Scripting
SVG "SVGEvents" (Gecko también implementa "SVGEvent") event.initEvent
"SVGZoomEvents" (Gecko también implementa "SVGZoomEvent") event.initUIEvent
Gecko implementa otros tipos de Eventos La información relevante de Gecko está tomada de nsEventDispatcher::CreateEvent - ver lxr.m.o
- "MouseScrollEvents", "PopupEvents" event.initMouseEvent
"PopupBlockedEvents" event.initPopupBlockedEvent
"XULCommandEvent", "XULCommandEvents" event.initCommandEvent

La razón por la que algunos eventos pueden crearse a partir de dos tipos distintos, es que la especificación DOM Level 3 Events ha cambiado de forma que las cadenas de tipo de eventos son únicas, mientras que se mantiene la compatibilidad con modelos anteriores que admiten nombres plurales.

 

Especificaciones

DOM Level 2 Events: createEvent

DOM Level 3 Events: createEvent

Etiquetas y colaboradores del documento

 Colaboradores en esta página: matajm, fscholz, AndresSaa, jsx, AshfaqHossain, teoli, Mgjbot, HenryGR
 Última actualización por: matajm,