Listener di eventi personalizzati di JavaScript

Mi stavo chiedendo 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, nel caso in cui alcune persone potessero aver bisogno di sapere, era:

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

 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ù localmente, individuando gli ascoltatori e gli editori: http://www.kaizou.org/2010/03/generating-custom-javascript-events/

L’implementazione di eventi personalizzati non è difficile. Puoi implementarlo in molti modi. Ultimamente lo 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'object Observable può essere riutilizzato e applicato da qualunque costruttore lo necessiti semplicemente mixando il prototipo di Observable con il prototipo di quel costruttore.

Per iniziare ad ascoltare, devi registrarti all'object osservabile, in questo modo:

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

O se il listener è un metodo di un object, in questo modo:

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

Dove listener è un'istanza di un object, che implementa il metodo "gestore".

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

 this.fireEvent("myEvent", data); 

Dove i dati sono alcuni dati che gli ascoltatori ritengo interessanti. 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 è adatta a tutti, ma ho avuto molto beneficio da questo pezzo di codice relativamente semplice.

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

Ecco un’implementazione davvero semplice (TypeScript / Babelish):

 const simpleEvent = (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: ( (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any)) }; }; 

Lo usi 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 questa

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

Se vuoi un semplice JavaScript, puoi trascriverlo usando un campo di gioco TypeScript .