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

This translation is incomplete. Please help translate this article from English

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

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

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

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•