javascript - Custom events (observer pattern) - Stack Overflow

admin管理员组

文章数量:1287882

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, ...)

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, ...)

• javascript
• custom-event
• observer-pattern

Share Improve this question Follow edited Dec 16, 2010 at 8:40 Kalinin asked Dec 16, 2010 at 8:26 KalininKalinin 2,51988 gold badges3737 silver badges4949 bronze badges 2

• This is probably too vague to get useful responses. In general, the observer pattern is simple to implement and there are numerous sources which explain it fully (including wikipedia. I'd also remend 'Head First Design Patterns' by Freeman and Freeman. Otherwise, just google it.) – jakeva Commented Dec 16, 2010 at 8:41
• 2 @Jake 'Head First Design Patterns' is targetted at java and hence no big help for javascript. The inner workings are pletely different. – Sean Patrick Floyd Commented Dec 16, 2010 at 9:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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

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

本文标签： javascriptCustom events (observer pattern)Stack Overflow