Listener di eventi personalizzati JavaScript

Question

Mi chiedevo se qualcuno può aiutarmi a capire esattamente come creare diversi ascoltatori di eventi personalizzati.

Non ho un caso specifico di un evento, ma voglio imparare solo in generale come è fatto, quindi posso applicarlo dove è necessario.

Quello che stavo cercando di fare, solo in caso alcune persone potrebbero aver bisogno di conoscere, era:

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

Ecco il modo per farlo più a livello locale, individuando gli ascoltatori e gli editori: http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Answer 2

Implementare eventi personalizzati non è difficile. Puoi implementarlo in molti modi. Ultimamente mi sto facendo in questo modo:

/*************************************************************** 
* 
* 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; 
    } 
}; 

L'oggetto Observable può essere riutilizzato e applicato da qualunque costruttore ne ha bisogno semplicemente mixng il prototipo del Observable con il prototipo di quel costruttore.

Per iniziare l'ascolto, è necessario registrarsi con l'oggetto osservabile, in questo modo:

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

O se il vostro ascoltatore è un metodo di un oggetto, in questo modo:

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

Dove ascoltatore è un'istanza di un oggetto, che implementa il metodo "gestore".

L'oggetto Observable ora può chiamare il suo metodo fireEvent ogni volta che succede qualcosa che si vuole comunicare ai suoi ascoltatori:

this.fireEvent("myEvent", data); 

cui i dati sono alcuni dati che gli ascoltatori la mia trovano interessante. Qualunque cosa tu abbia messo lì dipende da te - sai meglio di cosa è composto il tuo evento personalizzato.

Il metodo fireEvent passa semplicemente attraverso tutti gli ascoltatori registrati per "myEvent" e chiama la funzione registrata. Se la funzione restituisce false, significa che l'evento è annullato e l'osservabile non chiama gli altri ascoltatori. Di conseguenza, l'intero metodo fireEvent tornerà fasullo, quindi l'osservabile sa che qualsiasi azione che stava notificando ai suoi ascoltatori dovrebbe essere ripristinata.

Forse questa soluzione non soddisfa tutti, ma ho avuto molto beneficio da questo pezzo di codice relativamente semplice.

Answer 3

Da qui:

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

Qui è davvero un semplice (dattiloscritto/Babelish) implementazione:

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

si utilizza in questo modo:

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

o in classi come questo

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

Se volete pianura JavaScript è possibile transpile utilizzando TypeScript playground.