Custom Events (Observer Pattern)

Question

I can not find how to implement this (I apologize for writing a freestyle):

//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 are calling (generating) some kind of custom event (MyEvent). We have an object "myObj" that is able to recognize the appearance of "MyEvent" and somehow (in its own way) respond to it. In addition, we have other objects (different types) that (in their own way) respond to "MyEvent".

I know that there is a "observer pattern", but I cannot find a specific implementation.

Could you tell me where to read about it? Or is it impossible in nature? Or is this done in a completely different way?

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

Answer 1

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

. .

, - :

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);
            }
        }
    },

}

:

// 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

:

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');