de ignición y capturar eventos personalizados

Question

imaginar este escenario (no deja de ser un escenario):

• que tienen un contador global que consigue incrementa en cada clic del ratón.
• cuando llegue a 50 clics, quiero disparar un evento personalizado denominado 'reachedCount'
• quiero registrar mi objeto de la ventana para capturar ese evento con algo como
  window.addEventListener('reachedCount', function(args){alert(args.count);}, false)

así, mis problemas es que no lo sé, y no puedo encontrar en ningún lado cómo puedo pasar argumentos a mi eventHandler. Además, probé el método publicado por Rikudo, pero no funciona en IE lt 9.

¿Esto es posible? ¿cómo?

Answer 1

function fireEvent(name, target) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar() { 
    alert("foobar"); 
} 

function testEvents() { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document); 
} 

Encontré este código con 1 minuto de Búsqueda de Google. http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/

Answer 2

Usando la respuesta de Rikudo Sennin, puede pasar los parámetros a su controlador de eventos poniéndolos dentro del evento en sí, al igual que los manejadores de DOM.

function fireEvent(name, target, param1, param2) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    evt.param1 = param1; 
    evt.param2 = param2; 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar(ev) { 
    alert("foobar" + ' ' + ev.param1 + ' ' + event.param2); 
} 

function testEvents(param1) { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document, 'test', param1); 
} 

Answer 3

Todos sus argumentos, al igual que toda la demás información sobre el evento, deben llevarse dentro del Objeto del Evento en sí. El objeto de evento completamente autónomo lleva todos la información necesaria sobre ese evento. Los valores de sus argumentos generalmente se establecen cuando el nuevo objeto de evento personalizado es creado (no cuando el evento se desencadena).

(Todos los fragmentos de código de ejemplo a continuación exactamente coincide todo los otros fragmentos De hecho, algunos de los ejemplos que pueden no tener mucho sentido por sí mismos;.. Cada vez que esto sucede se refiere a fragmentos ejemplo anterior)

para sus propios argumentos, en algunos casos se podría reutilizar los campos existentes (o tal vez incluso añadir nuevos campos de su preferencia):

var newEvent = ... 
newEvent['scrollX'] = your-own-custom-value; 

exactamente cómo estos conseguirían difiere de ajuste dependiendo de si usted es capaz de utilizar el nuevo estandarizado Forma HTML5, o debe recurrir al soporte de navegador anterior. (Las diversas "cuñas" que añaden soporte para eventos personalizados incluso a navegadores antiguos que no proporcionan nada en absoluto no se tratan aquí; muchas de ellas proporcionan su propia forma única de establecer argumentos.)

forma HTML5 implica el (segundo) parámetro "diccionario" al constructor de objetos, algo como esto:

var newEvent = new CustomEvent('customname', { propertyname : propertyvalue, 
              anotherpropname : anotherpropvalue, 
               thirdpropname : thirdpropvalue, 
               etcpropname : etcpropvalue } ); 

el método más antiguo correspondiente sería algo como esto:

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['propertyname'] = propertyvalue; 
newEvent['anotherpropname'] = anotherpropvalue; 
newEvent['thirdpropname'] = thirdpropvalue; 
newEvent['etcpropname'] = etcprovalue; 

(el ejemplo anterior también puede aclarar lo que HTML5 CustomEvent co nstructor realmente lo está haciendo)

No se recomienda generalmente el uso de nombres de propiedades como este (o crear sus propias propiedades :-), porque los problemas entre navegadores y las molestias de depuración pueden ser bastante graves.De vez en cuando esto será necesario y funcionará, pero no confíe en él como una técnica general. Aunque algunos tipos de objetos de evento incluyen una propiedad con nombre particular, es posible que los tipos similares de objetos de evento no. Algunas propiedades de evento pueden ser de "solo lectura". Los objetos de evento son internamente muy variables de un navegador a otro e incluso entre versiones de navegador. Y crear sus propias propiedades nuevas puede confundir la implementación del navegador de Javascript.

En su lugar, utilice la propiedad particular que está "reservada" para su uso en eventos personalizados y nada más: detalle.

A menudo tendrá varios argumentos, pero solo hay una propiedad reservada para su uso. Por lo que el enfoque convencional es hacer siempre todos sus argumentos en una sola "objeto", algo como esto:

var myargs = { my : 1, 
       own : getElementById('foo'); 
      args : { X : 32, Y : 53 } }; 

La forma HTML5 de establecer esta variable quedará del siguiente modo:

var newEvent = new CustomEvent('customname', { bubbles : true, 
              cancelable : true, 
               detail : myargs }); 

La mayor interfaz para hacer la misma cosa se verá algo como:

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['detail'] = myargs; 

(por supuesto, si usted hace un uso intensivo de la sintaxis de corchete "objeto literal" Javasript para minimizar su típ Además, su código puede ser un poco diferente que los ejemplos anteriores que priorizan la claridad.

(Dos propiedades de eventos existentes, 'burbujas' y 'cancelable', siempre se deben establecer para cada evento, independientemente de la configuración de posibles argumentos personalizados . Si se está utilizando la nueva forma HTML5, siempre aparecerán como dos líneas adicionales en el objeto que es el segundo parámetro del constructor CustomEvent. Si se está utilizando el modo anterior, serán el segundo y el tercer parámetro de la llamada a initEvent (...).

También se proporcionan dos métodos diferentes para activar el evento personalizado. La nueva forma HTML5 usa object.dispatchEvent (newEvent). La forma anterior usa object.fireEvent ('customname', newEvent, false). Aquí "objeto" significa DOMObject/Element; exactamente qué sucede si algo "objeto" es algo además de un elemento DOM es aún más específico del navegador que el resto de este tema. (Mezclar el modo HTML5 y el modo antiguo generalmente funciona, pero puede ser confuso. Otra fuente frecuente de confusión es tener una función del sistema llamada fireEvent (...) y también definir su propia función con ese mismo nombre).

(Hay algunas diferencias arcanas entre las dos formas de desencadenar un evento personalizado. El antiguo método fireEvent (...) requiere que se vuelva a especificar el nombre del evento aunque ya se haya especificado en initEvent (...) y el antiguo método fireEvent (...) no desencadena la "acción predeterminada" [lo que sea que eso signifique].)

Por otro lado, se accede a los argumentos personalizados de la misma manera independientemente de si el HTML5 o el Se usó un método más antiguo para configurar el evento. Se verá algo como esto:

function customhandler(evt) { 
     alert(evt.detail.own); 

Cuando algunos de sus valores personalizados son en realidad objetos mismos, la notación de puntos puede ser tan larga que puede parecer un error tipográfico ... pero no lo es. Por ejemplo:

function customhandler(evt) { 
     alert(evt.detail.args.X); 

Parece algo de esto puede trabajar de forma ligeramente diferente en IE 9 y por debajo, sin embargo. Con suerte, los problemas son simplemente los habituales con el intento de volver a utilizar, o incluso crear, las propiedades de un objeto de evento.Si los problemas son más generalizados, podría poner un mensaje de "lo siento :-(" en su sitio web, o podría esperar a que falle el IE6/7/8/9, o podría intentar piratearlo entre los navegadores, o usted podría usar algún tipo de shim/fallback. No está claro para mí si es mejor encontrar un calce que se "parezca exactamente" a la interfaz convencional, o usar la interfaz alternativa proporcionada por el calce para todo (incluso cuando la interfaz convencional es disponible)

(Negación:.. Por supuesto que podría estar equivocado acerca de algunos de los anteriores ... :-)

Answer 4

las respuestas anteriores parecen estar en desuso

en primer lugar no lo haría usar funciones anónimas para pasar parámetros a el controlador de eventos. No es que haya visto a alguien mencionar esto en sus respuestas; solo necesitas evitarlo. Esto se debe a que cuando elimina los detectores de eventos, debe mencionar el controlador. Si el controlador es anónimo, no puede eliminar el oyente.

Cree un nuevo evento personalizado.

var data = { x:20, y:30, rotationY: 60 }, 
    end = new CustomEvent('MOTION_FINISHED', { detail: data }); 
    this.dispatchEvent(end); 

Parece que solo permite que los "detalles" de la propiedad pasen los parámetros. También he leído las propiedades de 'burbujas' y 'cancelable' [sic: desagradable deletreo estadounidense], pero no las mencionas en tu pregunta.

para recuperar sus parámetros:

function _handler(e){ 
    var x = (e.detail && e.detail.x) || 0; 
}