EventDispatcher

Just another EventDispatcher/EventTarget implementation.

Installation

Easy to install with npm package manager

npm install --save @actualwave/event-dispatcher

with yarn package manager

yarn add @actualwave/event-dispatcher

Usage

Note: EventDispatcher distribution package contains dist/ folder with package wrapped into UMD wrapper, so it can be used with any AMD module loader, nodejs require() or without any.

To start using EventDispatcher, just instantiate it on its own

class MyClass {
  constructor() {
    this._dispatcher = new EventDispatcher();
  }
  addListener(handler) {
    this._dispatcher.addEventListener('didSomething', handler);
  }
  doSomething() {
	  this._dispatcher.dispatchEvent('didSomething');
  }
}

extend it with your class

class MyClass extends EventDispatcher {
  doSomething() {
    this.dispatchEvent('didSomething');
  }
}

After instantiating MyClass, every call of doSomething() will fire event didSomething and every listener attached to this event will be called with event object as argument.

var myObj = new MyClass();
myObj.addEventListener('didSomething', function(event) {
  console.log('My Listener', event.type);
});
myObj.doSomething();

When adding listeners they will be executed in same order as they where added. To change order you can use optional priority argument to addEventListener() method.

myObj.addEventListener('didSomething', function(event) {
  console.log('Prioritized Listener', event.type);
}, 1);
myObj.doSomething();

By default priority is set to 0, and you can specify higher priority >0 or lower <0, only integer values are allowed.

To fire event you should use dispatchEvent() method, it can be used in three ways: You can pass only event type string. In this case event object will be created by EventDispatcher

var dispatcher = new EventDispatcher();
dispatcher.dispatchEvent('eventType');

With event type you can specify any data, as second argument, that should be passed with event

dispatcher.addEventListener('eventType', function(event) {
  console.log('My Listener', event.type, event.data);
});
dispatcher.dispatchEvent('eventType', {myData: 'something'});

Also you can pass event object, it must contain type:String property

dispatcher.dispatchEvent({type: 'eventType', data: 'data is optional'});

If you want full control of events that fire from your EventDispatcher, you can specify event pre-processor function that will be called for each event before it fired. This function should return same or new event object.

function eventPreprocessor(event){
  event.data = event.data || {};
  return event;
}
var dispatcher = new EventDispatcher(eventPreprocessor);
dispatcher.dispatchEvent('eventType');

eventPreprocessor() function will be called with event object and returned object will be used.

Example available in project's example folder. To try example first run server

npm run server

And then go to http://localhost:8081/index.html

API