Пользовательские события (шаблон наблюдателя)

Question

Не могу найти, как это реализовать (извиняюсь за запись вольным стилем):

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

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

Идея в том, что мы вызываем (генерируем) какое-то пользовательское событие (MyEvent).У нас есть объект «myObj», который способен распознать возникновение «MyEvent» и как-то (по-своему) ответить на него.Кроме того, у нас есть другие объекты (различные виды), которые (по-своему) реагируют на «MyEvent».

Я знаю, что существует «шаблон наблюдателя», но я не могу найти конкретную реализацию.

Подскажите, пожалуйста, где почитать об этом?Или в природе вообще это невозможно?Или это делается совсем по-другому?

Обновление 1: пожалуйста, никаких библиотек JS (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');