Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

Crear eventos personalizados

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

var event = new Event('build');

// Escucha para el evento.
elem.addEventListener('build', function (e) { ... }, false);

// Disparar event.
elem.dispatchEvent(event);

    Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

Adición de datos personalizados con CustomEvent ()

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
Por Ejemplo, el evento se puede crear de la siguiente manera:

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

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

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

La Forma Antigua

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

// Creamos el evento.
var event = document.createEvent('Event');

/* Definimos el nombre del evento que es 'build'.*/
event.initEvent('build', true, true);

// Asignamos el evento.
document.addEventListener('build', function (e) {
  // e.target matches document from above
}, false);

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

El disparo incorporado eventos

    Comunmente es deseable gatillar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

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");
  }
}

Compatibilidad con los Navegadores

 

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 Sin soporte 11.60 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? 6

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: juanpablocarrillo, BrunoViera, enreda, Soid
Última actualización por: juanpablocarrillo,