What is a good generic sibling control Javascript communication strategy?

Question

I'm building a webpage that is composed of several controls, and trying to come up with an effective somewhat generic client side sibling control communication model. One of the controls is the menu control. Whenever an item is clicked in here I wanted to expose a custom client side event that other controls can subscribe to, so that I can achieve a loosely coupled sibling control communication model.

To that end I've created a simple Javascript event collection class (code below) that acts as like a hub for control event registration and event subscription. This code certainly gets the job done, but my question is is there a better more elegant way to do this in terms of best practices or tools, or is this just a fools errand?

/// Event collection object - acts as the hub for control communication.
function ClientEventCollection()
{
    this.ClientEvents = {};
    this.RegisterEvent = _RegisterEvent;
    this.AttachToEvent = _AttachToEvent;
    this.FireEvent = _FireEvent;

    function _RegisterEvent(eventKey)
    {
        if (!this.ClientEvents[eventKey])
           this.ClientEvents[eventKey] = [];
    }

    function _AttachToEvent(eventKey, handlerFunc)
    {
        if (this.ClientEvents[eventKey])
             this.ClientEvents[eventKey][this.ClientEvents[eventKey].length] = handlerFunc;
    }

    function _FireEvent(eventKey, triggerId, contextData )
    {
        if (this.ClientEvents[eventKey])
        {
            for (var i = 0; i < this.ClientEvents[eventKey].length; i++) 
            {
                var fn = this.ClientEvents[eventKey][i];
                if (fn)
                    fn(triggerId, contextData);
           }
        }
    }
}

// load new collection instance.
var myClientEvents = new bsdClientEventCollection();

// register events specific to the control that owns it, this will be emitted by each respective control.
myClientEvents.RegisterEvent("menu-item-clicked");

Here is the part where this code above is consumed by source and subscriber controls.

// menu control 
$(document).ready(function() 
{    
    $(".menu > a").click( function(event) 
                    { 
                        //event.preventDefault(); 
                        myClientEvents.FireEvent("menu-item-clicked", $(this).attr("id"), null);

                    });
});


<div style="float: left;" class="menu">
 <a id="1" href="#">Menu Item1</a><br />
 <a id="2" href="#">Menu Item2</a><br />
 <a id="3" href="#">Menu Item3</a><br />
 <a id="4" href="#">Menu Item4</a><br />
</div>



// event subscriber control
$(document).ready(function() 
{    
    myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged);
    myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged2);
    myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged3);
});


function menuItemChanged(id, contextData) 
{
    alert('menuItemChanged ' + id);
}

function menuItemChanged2(id, contextData) 
{
    alert('menuItemChanged2 ' + id);
}

function menuItemChanged3(id, contextData) 
{
    alert('menuItemChanged3 ' + id);
}

Answer 1

jQuery's event system can pass additional handler parameters when you trigger events. We also separate the control namespace from jQuery selectors by creating a registry that maps control names to selectors. To deal with handlers binding to a control before the control is registered, we implement a binding delay mechanism.

var controls = {};
(function ControlRegistry(controls) {
  controls.items = {};
  function bindNow(selector, event, eventData, handler) {
      $(selector).bind(event, eventData, handler);
  }
  function delayBinding(queue, event, eventData, handler) {
      queue.push([event, eventData, handler]);
  }
  function bindAll(queue, selector) {
      for (var i=0; i<queue.length; ++i) {
          var args = queue[i];
          args.unshift(selector);
          bindNow.apply(controls, args);
      }
  }
  controls.register = function (name, selector) {
    if (typeof this.items[name] == 'object') {
       bindAll(this.items[name], selector);
    }
    this.items[name] = selector;
  };
  controls.bind = function (control, event, eventData, handler) {
    jQuery.isFunction( eventData ) {
        handler = eventData;
        eventData = null;
    }
    switch (typeof this.items[control]) {
      case 'undefined':
        this.items[control] = [];
        // FALLTHRU
      case 'object':
        delayBinding(this.items[control], event, eventData, handler);
        break;

      case 'string':
        bindNow(this.items[control], event, eventData, handler);
        break;
    }
  }
})(controls);

$(document).ready(function() 
{
    controls.register('menuItem', '.menu > a');
    $(".menu > a").click( function(event) 
                    {
                        $(this).trigger("menu-item-clicked", [$(this).attr("id"), 'cow', 'moo']);

                    });
});

Elsewhere:

function menuItemChanged(evt, id, animal, speech) 
{
    alert('menuItemChanged ' + id 
          + '\nThe ' + animal + ' says "' + speech + '."');
}

function menuItemChanged2(evt, id, animal, speech)) 
{
    alert('menuItemChanged2 ' + id 
          + '\nThe ' + animal + ' says "' + speech + '."');
}

function menuItemChanged3(evt, id, animal, speech)) 
{
    alert('menuItemChanged3 ' + id 
          + '\nThe ' + animal + ' says "' + speech + '."');
}

$(document).ready(function() 
{
    controls.bind('menuItem', "menu-item-clicked", menuItemChanged);
    controls.bind('menuItem', "menu-item-clicked", menuItemChanged2);
    controls.bind('menuItem', "menu-item-clicked", menuItemChanged3);
});

Update

if you include the restriction that a control be registered before handlers are bound to its events, the control registry can be vastly simplified:

var controls = {
  register: function (name, selector) {
    if (typeof this[name] != 'function') {
      this[name] = selector;
    }
  };
};
...

controls.register('menuItem', '.menu > a');
$(document).ready(function() 
{
    $(".menu > a").click( function(event) 
                    {
                        $(this).trigger("menu-item-clicked", [$(this).attr("id"), 'cow', 'moo']);

                    });
});
...

$(document).ready(function() 
{
    $(controls.menuItem).bind("menu-item-clicked", menuItemChanged);
    $(controls.menuItem).bind("menu-item-clicked", menuItemChanged2);
    $(controls.menuItem).bind("menu-item-clicked", menuItemChanged3);
});

This is a reasonable restriction, as you can register early (within the script for the control) and bind late (in $(document).ready).

Answer 2

My original solution ended up being the right one for me because it achieves the loose coupling I was after in a straight-forward and simple way.