Skip to main content

MicroEvent.js is a event emitter library which provides the observer pattern to javascript objects. It works on node.js and browser. It is a single .js file containing a 20 lines class (only 321-bytes after minification+gzip).

/**
 * MicroEvent - to make any js object an event emitter
 *
 * - pure javascript - server compatible, browser compatible
 * - dont rely on the browser doms
 * - super simple - you get it immediatly, no mistery, no magic involved
 *
 * Also see: https://javascript.info/mixins#eventmixin
 *
 * @author Jerome Etienne (https://github.com/jeromeetienne)
 */

const MicroEvent = function() {};

MicroEvent.prototype = {
    on: function(event, fct) {
        this._events = this._events || {};
        this._events[event] = this._events[event] || [];
        this._events[event].push(fct);
    },

    off: function(event, fct) {
        const n = arguments.length;
        if (n === 0) return delete this._events;
        if (n === 1) return delete this._events[event];

        this._events = this._events || {};
        if (!event in this._events) return;
        this._events[event].splice(this._events[event].indexOf(fct), 1);
    },

    trigger: function(event /* , args... */) {
        this._events = this._events || {};
        if (!event in this._events) return;
        for (let i = 0; i < this._events[event].length; i++) {
            this._events[event][i].apply(
                this,
                Array.prototype.slice.call(arguments, 1)
            );
        }
    }
};

/**
 * Mixin will delegate all MicroEvent.js function in the destination object.
 *
 * - MicroEvent.mixin(Foobar) will make Foobar able to use MicroEvent
 *
 * @static
 * @param {object} destObject the object which will support MicroEvent
 */
MicroEvent.mixin = function(destObject) {
    const props = ["on", "off", "trigger"];
    for (let i = 0; i < props.length; i++) {
        destObject.prototype[props[i]] = MicroEvent.prototype[props[i]];
    }
};

// ---------------------------------------------------------------------------
// Example Usage
// ---------------------------------------------------------------------------

const Ticker = function(interval) {
    const self = this;
    setInterval(function() {
        self.trigger("tick", new Date());
    }, interval);
};

/**
 * make Ticker support MicroEventjs
 */
MicroEvent.mixin(Ticker);

// create a ticker
const ticker = new Ticker(500);

// bind the 'tick' event
ticker.on("tick", function(date) {
    // display to check
    console.log("notified date: " + date);
});

//
// Class-ified/ES6 Version

class MicroEvent {
    /**
     * MicroEvent - to make any js object an event emitter
     *
     * - pure javascript - server compatible, browser compatible
     * - dont rely on the browser doms
     * - super simple - you get it immediatly, no mistery, no magic involved
     *
     * Also see: https://javascript.info/mixins#eventmixin
     *
     * @author Jerome Etienne (https://github.com/jeromeetienne)
     */
    constructor() {}

    on(event, fn) {
        this._events = this._events || {};
        this._events[event] = this._events[event] || [];
        this._events[event].push(fn);
    }

    off(event, fn) {
        const argsLength = arguments.length;
        if (argsLength === 0) {
            return delete this._events;
        }
        if (argsLength === 1) {
            return delete this._events[event];
        }

        this._events = this._events || {};
        if (!event in this._events) {
            return;
        }
        this._events[event].splice(this._events[event].indexOf(fn), 1);
    }

    trigger(event /* , args... */) {
        this._events = this._events || {};
        if (!event in this._events) {
            return;
        }

        for (let i = 0; i < this._events[event].length; i++) {
            this._events[event][i].apply(
                this,
                Array.prototype.slice.call(arguments, 1)
            );
        }
    }

    /**
     * Mixin will delegate all MicroEvent.js function in the destination object.
     *
     * - MicroEvent.mixin(Foobar) will make Foobar able to use MicroEvent
     *
     * @static
     * @param {object} destObject the object which will support MicroEvent
     */
    static mixin(destObject) {
        const props = ["on", "off", "trigger"];
        for (let i = 0; i < props.length; i++) {
            destObject.prototype[props[i]] = MicroEvent.prototype[props[i]];
        }
    }
}

// ---------------------------------------------------------------------------
// Example Usage
// ---------------------------------------------------------------------------

const Ticker = function(interval) {
    const self = this;
    setInterval(() => {
        self.trigger("tick", new Date());
    }, interval);
};

/**
 * make Ticker support MicroEventjs
 */
MicroEvent.mixin(Ticker);

// create a ticker
const ticker = new Ticker(500);

// bind the 'tick' event
ticker.on("tick", date => {
    // display to check
    console.log("notified date: " + date);
});