Dowemo
0 0 0 0


Question:

I am trying to get a better understanding of object orientated techniques in Java script.

I have the folowing (Trivial) object.

function CustomObject () {
    this.size = 1;
};
CustomObject.prototype.addSize = function () {
    this.size += 1;
    if(this.size > 5) {
        //Raise custom Event
    }
};

And I am instating it like this.

   var myObject = new CustomObject();
    myObject.addSize();
    // Add listener for custom event from with in my Custom Object.
    // Something like this....
    myObject.addEventListener("CustomEvent", handelCustomEvent, false);
    function handelCustomEvent() {}

How do I raise a custom event in my custom object and then listen to that event in the parent? Is this kind of thing even possible in Java script?


Best Answer:


You can do it by making your custom event class which has listener and trigger related functions. I found a good article about this. The class is implemented like this:

//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved.
//MIT License
function EventTarget(){
    this._listeners = {};
}
EventTarget.prototype = {
    constructor: EventTarget,
    addListener: function(type, listener){
        if (typeof this._listeners[type] == "undefined"){
            this._listeners[type] = [];
        }
        this._listeners[type].push(listener);
    },
    fire: function(event){
        if (typeof event == "string"){
            event = { type: event };
        }
        if (!event.target){
            event.target = this;
        }
        if (!event.type){  //falsy
            throw new Error("Event object missing 'type' property.");
        }
        if (this._listeners[event.type] instanceof Array){
            var listeners = this._listeners[event.type];
            for (var i=0, len=listeners.length; i < len; i++){
                listeners[i].call(this, event);
            }
        }
    },
    removeListener: function(type, listener){
        if (this._listeners[type] instanceof Array){
            var listeners = this._listeners[type];
            for (var i=0, len=listeners.length; i < len; i++){
                if (listeners[i] === listener){
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
};

But, as the writer said this class isn't complete. It has some limitations. So I recommend using jQuery instead. You can use your custom event easily with bind() and trigger() function. There's a good thread about this. If you see Custom events in jQuery?, you'll find out how to implement it with jQuery.




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs