Custom events (observer pattern)

Question

I can not find how to implement this (I apologize for the freestyle record):

//assign the event handler for the object "myObj"     
myObj.onMyEvent = //do something

//if something happened somewhere, then run the event
MyEvent.fire();

The idea is that we call (generate) some custom event (MyEvent). We have an object "myObj" that is able to recognize the occurrence of the "MyEvent" and somehow (in his own way) to respond to it. In addition, we have other objects (diffrent sorts), that (in their own way) react to "MyEvent".

I know that there are "observer pattern" but I can not find a specific implementation.

Can you please tell where to read about it? Or in nature is generally not possible? Or it is done quite differently?

Update 1: no JS libs, please (jQuery, Prototype, YUI, ...)

Answer 1

no JS libs, please (jQuery, Prototype, YUI, ...)

I would seriously re-think this requirement. All of these libraries have solved this or similar problems many times.

But if you want to start from scratch, do something like this:

window.customEvents = {
    handlers : {
        foo:[],
        bar:[],
        baz:[]
    },

    registerEventHandler:function(event, object, handler){
       if(typeof(customEvents.handlers[event])=="undefined")
           customEvents.handlers[event]=[]; 
       customEvents.handlers[event].push([object, handler]);
    },

    fireEvent:function(eventName, data){
        if(customEvents.handlers[event]){
            for(var i = 0; i < customEvents.handlers[event].length; i++){
                var handlerPair = customEvents.handlers[event][i];
                handlerPair[1](handlerPair[0], data);
            }
        }
    },

}

Usage:

// register event handler
customEvents.registerEventHandler(eventName, targetObject, handlerFunction)

// fire event
customEvents.fireEvent(eventName, data)

// handlerFunction will be passed two parameters: targetObject and event data

Answer 2

My solution:

var customEvents = {
            _handlers : {},

            subscribe: function(event, handler){
               if(typeof(this._handlers[event])=="undefined")
                   this._handlers[event]=[]; 
               this._handlers[event].push(handler);
            },

            fire:function(event, data){
                if(this._handlers[event]){
                    for(var i = 0; i < this._handlers[event].length; i++){
                        this._handlers[event][i](data);
                    }
                }
            }
    };


var myObj1 = new function(){
        this.handler = function(data){
            console.log(data+'1');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  



var myObj2 = new function(){
        this.handler = function(data){
            console.log(data+'2');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  


//if something happened somewhere, then run the event
customEvents.fire("greatEvent", 'ta-da');