JavaScript Custom Listener de evento

Question

Me preguntaba si alguien me puede ayudar a entender exactamente cómo crear diferentes oyentes de eventos personalizados.

No tengo un caso específico de un evento pero quiero aprender en general cómo se hace, así que puedo aplicarlo donde sea necesario.

Lo que estaba buscando para hacer, sólo en caso de que algunas personas podrían necesitar saber, fue:

var position = 0; 

for(var i = 0; i < 10; i++) 
{ 
    position++; 
    if((position + 1) % 4 == 0) 
    { 
     // do some functions 
    } 
} 

Answer 1

var evt = document.createEvent("Event"); 
evt.initEvent("myEvent",true,true); 

// custom param 
evt.foo = "bar"; 

//register 
document.addEventListener("myEvent",myEventHandler,false); 

//invoke 
document.dispatchEvent(evt); 

Aquí es la manera de hacerlo de forma más local, la localización de los oyentes y los editores: http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Answer 2

La implementación de eventos personalizados no es difícil. Puedes implementarlo de muchas maneras. Últimamente estoy haciendo de esta manera:

/*************************************************************** 
* 
* Observable 
* 
***************************************************************/ 
var Observable; 
(Observable = function() { 
}).prototype = { 
    listen: function(type, method, scope, context) { 
     var listeners, handlers; 
     if (!(listeners = this.listeners)) { 
      listeners = this.listeners = {}; 
     } 
     if (!(handlers = listeners[type])){ 
      handlers = listeners[type] = []; 
     } 
     scope = (scope ? scope : window); 
     handlers.push({ 
      method: method, 
      scope: scope, 
      context: (context ? context : scope) 
     }); 
    }, 
    fireEvent: function(type, data, context) { 
     var listeners, handlers, i, n, handler, scope; 
     if (!(listeners = this.listeners)) { 
      return; 
     } 
     if (!(handlers = listeners[type])){ 
      return; 
     } 
     for (i = 0, n = handlers.length; i < n; i++){ 
      handler = handlers[i]; 
      if (typeof(context)!=="undefined" && context !== handler.context) continue; 
      if (handler.method.call(
       handler.scope, this, type, data 
      )===false) { 
       return false; 
      } 
     } 
     return true; 
    } 
}; 

El objeto observable puede ser reutilizado y aplicada por cualquier constructor necesita simplemente por mixng el prototipo de observable con el prototipo muy de ese constructor.

para empezar a escuchar, hay que darse de alta en el objeto observable, así:

var obs = new Observable(); 
obs.listen("myEvent", function(observable, eventType, data){ 
    //handle myEvent 
}); 

O si su oyente es un método de un objeto, así:

obs.listen("myEvent", listener.handler, listener); 

Dónde listener es una instancia de un objeto, que implementa el método "handler".

El objeto observable ahora puede llamar a su método fireEvent cada vez que sucede algo que se quiere comunicar a sus oyentes:

this.fireEvent("myEvent", data); 

Cuando los datos es algunos datos que los oyentes Mi encuentran interesante. Lo que sea que pongas allí depende de ti; tú sabes mejor de qué está hecho tu evento personalizado.

El método fireEvent simplemente pasa por todos los oyentes que se registraron para "myEvent" y llama a la función registrada. Si la función devuelve falso, significa que el evento se cancela y el observable no llamará a los otros oyentes. Como resultado, todo el método fireEvent también volverá a funcionar, por lo que el observable sabe que cualquier acción que notificara a sus oyentes debería revertirse.

Quizás esta solución no convenga a todo el mundo, pero he tenido mucho beneficio de esta pieza relativamente simple de código.

Answer 3

A partir de aquí:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

// create the event 
var evt = document.createEvent('Event'); 
// define that the event name is `build` 
evt.initEvent('build', true, true); 

// elem is any element 
elem.dispatchEvent(evt); 


// later on.. binding to that event 
// we'll bind to the document for the event delegation style. 
document.addEventListener('build', function(e){ 
    // e.target matches the elem from above 
}, false); 

Answer 4

Aquí es una muy simple (Letra de imprenta/Babelish) implementación:

const simpleEvent = <T extends Function>(context = null) => { 
    let cbs: T[] = []; 
    return { 
     addListener: (cb: T) => { cbs.push(cb); }, 
     removeListener: (cb: T) => { let i = cbs.indexOf(cb); cbs.splice(i, Math.max(i, 0)); }, 
     trigger: (<T> (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any)) 
    }; 
}; 

que lo utilice como esto:

let onMyEvent = simpleEvent(); 
let listener = (test) => { console.log("triggered", test); }; 
onMyEvent.addListener(listener); 
onMyEvent.trigger("hello"); 
onMyEvent.removeListener(listener); 

o en clases como esto

class Example { 
    public onMyEvent = simpleEvent(this); 
} 

Si desea llanura JavaScript que puede transpile usando TypeScript playground.