Creación y activación de eventos (Event)

En este artículo se muestra cómo crear y activar eventos.

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 pude crear la siguiente manera:

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

    Esto permitirá tener acceso a los datos adicionales en el detector 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);

// Asignamo 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

    Este ejemplo demuestra que simula un clic (que es la generación de programación un evento click) en una casilla de verificación usando métodos del DOM. Ver el ejemplo en acción.

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

See also

• document.createEvent()
• Event.initEvent()
• EventTarget.dispatchEvent()
• EventTarget.addEventListener()