Simple eventer class

It is useful to have events which can propagate wherever they are needed throughout an application. Unfortunately not all JavaScript objects come with this functionality built in.

This tutorial will detail a very simple implementation of an Eventer class. You'll be able to use it anywhere you need basic events.

class Eventer
{
    private _callbacks: { [index: string]: Function[] } = {};
}

Upon instantiation an empty _callbacks object is created which will act as a library of event listeners.

addListener (name: string, callback: Function)
{
    if (!this._callbacks[name])
        this._callbacks[name] = [];

    if (this._callbacks[name].indexOf(callback) <= -1)
        this._callbacks[name].push(callback);
}

removeListener (name: string, callback: Function)
{
    if (!this._callbacks[name])
        return;

    let index = this._callbacks[name].indexOf(callback);
    if (index > -1) {
        if (this._callbacks[name].length <= 1)
            delete this._callbacks[name];
        else
            this._callbacks[name].splice(index, 1);
    }
}

We have the ability to add and remove listeners, which we want to have ready for when an event is triggered.

trigger (name: string, ...params: any[])
{
    if (!this._callbacks[name])
        return;

    // run all callbacks
    let callbacks = this._callbacks[name].slice();

    for (let callback of callbacks) {
        callback(...params);
    }
}

We trigger events and include an optional set of parameters which are passed to all our callbacks. You can add and remove listeners, then trigger their associated events when needed.

It's possible our callbacks are manipulating the _callbacks object. Therefore we clone first in order to avoid potential conflicts.

An example of how you might use our finished module is as follows.

class Car
{
    eventer = new Eventer();

    start ()
    {
        this.eventer.trigger("started");
    }
}

namespace MyApp
{
    var car = new Car();

    function _onCarStarted ()
    {
        console.log("Car started!");
    }

    car.eventer.addListener("started", _onCarStarted);
    car.start();
}

Having events anywhere can be a very handy way of cleaning up a growing codebase.