Jerome Etienne Notes
Just released Pacmaze my first WebGL game! Check it out!

MicroEvent.js - micro event emitter in 20 lines

2011-03-22

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 for a total of 321-bytes after minification+gzip.

How to Use It

You need a single file microevent.js. Include it in a webpage via the usual script tag.

<script src="microevent.js"></script>

To include it in a nodejs code isnt much harder

var MicroEvent = require('./microevent.js')

Now suppose you got a class Foobar, and you wish it to support the observer partern. do

MicroEvent.mixin(Foobar)

That's it. The repository contains an example in browser and an example in nodejs. Both use the same code in different contexts. Let me walk you thru it.

Example

First we define the class which going to use MicroEvent.js. This is a ticker, it is triggering 'tick' events every second, and add the current date as parameter

var Ticker = function(){
    var self = this;
    setInterval(function(){
        self.trigger('tick', new Date());
    }, 1000);
};

We mixin MicroEvent into Ticker and we are all set.

MicroEvent.mixin(Ticker);

Now lets actually use the Ticker Class. First, create the object.

var ticker = new Ticker();

and bind our tick event with its data parameter

ticker.bind('tick', function(date) {
    console.log('notified date', date);
});

And you will see this output:

notified date Tue, 22 Mar 2011 14:43:41 GMT
notified date Tue, 22 Mar 2011 14:43:42 GMT
...

Motivation

I needed a event emitter in js... something generic which works on browser and server, cross browser. The solutions i found were too complex for my taste.

When i have seen John Resig micro templating or simple inheritance, i loved it. It is simple, short, self contained, easy to understand... so elegant. i thought "this is no more a dependancy because i could maintain it if needed". Now i try to apply those principles to my own work.

Conclusion

MicroEvent.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Follow jerome_etienne on Twitter