Updated: Custom Event System for Prototype

After using my original Event System for a little while I realize that I structured the original Classes all wrong. For some reason, I though it was a good idea to pass the event dispatching responsibilities off on the Event object itself. Bad idea. So I updated the code, all 2K of it.

Here's the update:

/**
 * @author toddcullen
 */
CustomEvent = {};
CustomEvent.Events = {};
CustomEvent.Events.Base = Class.create();
CustomEvent.Events.Base.prototype = {
 initialize : function(){
  this.type = "CustomEvent.Events.Base";
 }
}
CustomEvent.EventController = Class.create();
CustomEvent.EventController.prototype = {
 initialize: function(){
  this.listeners = $A([]);
 },
 addEventListener: function(n, f){
  this.listeners.push({name: n, callback: f});
 },
 removeEventListener: function(n, f){
  this.listeners = this.listeners.without({name: n, callback: f});
 },
 dispatchEvent: function(n, e){
  for(var x=0; x<this.listeners.length; x++){
   if(this.listeners[x].name == n){
    this.listeners[x].callback(e);
   }
  }
 }
}
var EventController = new CustomEvent.EventController();

You can create any type of Event you'd like. Its just an object you pass from the event target to the listener. Here's an example usage where I created a DataEvent Event Class:

   /*
    * Data Event 
    */
   CustomEvent.Events.DataEvent = Class.create();
   CustomEvent.Events.DataEvent.prototype = {
    initialize : function(data){
     this.type = "CustomEvent.Events.DataEvent";
     this.data = $H(data);
    }
   };
   
   Event.observe(window, "load", function(){
    EventController.addEventListener("BasicEvent", testListener);
    EventController.addEventListener("DataEvent", testListener);
    
    Event.observe('basic', 'click', dispatchBasic);
    Event.observe('data', 'click', dispatchData);
   });
   
   function dispatchBasic(){
    var event = new CustomEvent.Events.Base();
    EventController.dispatchEvent("BasicEvent", event);
   }
   function dispatchData(){
    var event = new CustomEvent.Events.DataEvent({info : 'HELLO WORLD!'});
    EventController.dispatchEvent("DataEvent", event);
   }
   function testListener(event){
    alert("event type:"+event.type);
    if(event.type == "CustomEvent.Events.DataEvent"){
     alert('event data: ' + event.data.inspect());
    }
   }

The HTML is simply an anchor with an id of "data" and an anchor with an idea of "basic". This system is really useful for an HTML UI that has to be flexible. Minimize/eliminates the need for objects to know about each other. They only need to "know" about the EventController.

Snag the full demo here.

Cheers,
Todd