JavaScript Event Bus

I was taught some time ago to always focus on decoupling my code.  Your server and the client (browser) should not need to know anything about the structure of one another.  They can pass information back and forth, but that should be the full extent of their integration.  There are several reasons for this, but the most important of which is modularity – you can drop features or entire sections of code from one without damaging the other.

Once your server-side and client-side code is decoupled, you can start packaging your object-oriented code in each module.  This way, you can plug-and-play with different processes and you don’t have to worry about breaking your code.  The easiest way to do this is by breaking up your code and having each object listen for and respond to global events rather than trying to interact with other objects in your code.

You can do this by building an event bus – rather than communicating directly with other objects on the page, each object communicates with this central event management system.  An object asks the event bus to notify it when something happens.  It also tells the event bus whenever it does something important so other listeners can respond in turn.  JavaScript is easily given to this kind of event-driven architecture, so I thought it would be easy to find a pre-built event bus.

I was wrong.

Some systems, like jQuery, have very advanced event handlers built in to the library.  Unfortunately, many of these are focused on DOM-related events (when things change in the document itself) rather than scripting events (when things happen in different JavaScript functions).  As much as I tried, it turned out none of the pre-existing event management systems did what I wanted them to do.  So I wrote my own.

This is a very rough framework that I expect to spend the next month or so refining and developing as a full library.  At the moment, it satisfies very basic needs – you can register an event listener, you can trigger custom events, and you can remove an event listener if needed.  The full system will feature live debugging features that can be built in to any page – basically, you’ll be able to watch as events fire, modify which listeners are registered, and modify page behavior on the fly in real time.  Not there yet, but here’s the basic skeleton:

// Register the namespace
var parseNamespace = parseNamespace || function(root, ns) {
    var nsParts = ns.split(".");

    for (var i = 0; i < nsParts.length; i++) {
        if (typeof root[nsParts[i]] == "undefined")
            root[nsParts[i]] = new Object();
        root = root[nsParts[i]];
parseNamespace(window, "JDM.EventBus");

// Main namespace and class
JDM.EventBus = {
    // Listener object, contains actual listener references and methods for adding/removing listeners as well as binding the listeners to their appropriate
    // triggers at run-time.
    Listeners: {
        // Instantiates the listener object - every event handler is registered and listed in this object.
        List: {},

        // Adds a function with an associated handler nickName and execution priority to the list of listeners.
        Add: function (eventName, funcName, fn, priority) {
            parseNamespace(this.List, eventName + "." + priority + "." + funcName);
            this.List[eventName][priority][funcName] = fn;

        // Removes the function associated with a particular event listener nickName.  The event listener will still be registered with the system,
        // but the trigger function will be triggering a null function, so it won't do anything.
        Remove: function (eventName, nickName) {
            for (var priority in this.List[eventName]) {
                this.List[eventName][priority][id] = null;

    // Checks for priority settings, if none given, add a listener to the list with a very low priority
    Subscribe: function (eventName, functionName, fn, priority) {
        if (!priority)
            priority = 10;
        this.Listeners.Add(eventName, functionName, fn, priority);

    // Trigger an event
    Broadcast: function (eventName, args) {
        if (!this.Listeners.List[eventName]) return;
        for (var i = 0; i <= 10; i++) {
            var funcHolder = this.Listeners.List[eventName][i];
                for (var fn in funcHolder) {
                    if (funcHolder[fn])
                        if(args) {
                        } else {

    // Remove an event listener
    Unsubscribe: function (eventName, nn) {
        this.Listeners.Remove(eventName, nn);

Continues on Page 2 »

Pages: 1 2

Speak Your Mind