1 Replies - 646 Views - Last Post: 14 March 2012 - 09:03 PM

#1 Charlie IronGleet  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 225
  • Joined: 29-January 09

Custom Javascript EVENTMANAGER class

Posted 14 March 2012 - 08:22 PM

I am trying to create a custom javascript EventManager class. I've adopted the format Grant Skinner uses in his easel.js framework for creating the class and need to stick with it. I'm really just kind of lost at this point - I think that - at least in a conceptual sense - I have the right idea here and that it's mostly scope issues that evade me.

I'm hoping someone here can show me how to get this functional =- at least to a point where addListener and dispatchEvent are functional. Also, I know there are lots of ways to do this, but I really need to keep this class format taken from Skinner.


(function(window) {
    var EventManager = function() {
        this.initialize();
    }
    var p = EventManager.prototype;

    // place properties here



    // Constructor
    p.initialize = function() {
        p.listeners = new Array();
    }

    // public methods


    p.addListener = function(fn, event) {
        console.log("p.addListener Hit");
        console.log("event: " + event);
        console.log("handler function: " + fn);
        if(!this.listeners[event]) {
            this.listeners[event] = [];
        }

        if(fn instanceof Function) {
            this.listeners[event].push(fn);
        }
        return this;
    }

    p.dispatchEvent = function(event, params) {
        console.log("Dispatch Event");
        // loop through listeners array
        for(var index = 0; index < listeners[ev].length; index++) {
            // execute matching 'event' - loop through all indices and
            // when ev is found, execute
            listeners[event][index].apply(window, params);
        }
    }

    p.removeListener = function(event, fn) {
        // split array 1 item after our listener
        // shorten to remove it
        // join the two arrays back together

    }
    window.EventManager = EventManager;

}(window));




    <script>

    eventManager = new EventManager();

    var FooTest = function() {
        this.fire = function() {
           //alert("fire");
        }

            this.fire();
     };

    function onFire() {
       // console.log("FIRED!");
    }

    var o = new FooTest();
   eventManager.addListener.call("fire", onFire );
   // eventManager.dispatchEvent.call(o,'fire' );

    </script>



I appreciate your help!!!

Is This A Good Question/Topic? 0
  • +

Replies To: Custom Javascript EVENTMANAGER class

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,989
  • Joined: 08-June 10

Re: Custom Javascript EVENTMANAGER class

Posted 14 March 2012 - 09:03 PM

There are a few things in there that don't add up.

First, in your second snippet, why do you use call() on the addListener function? You can just call the function directly. If you do need to use call, make sure you are passing the parameters in the correct order. That is, the first parameter is the this reference, followed by all the other parameters your function takes in. (Read all about that in the Mozilla docs for the call function.)

Second, in your dispatchEvent function, you use an unset ev variable (should that perhaps be event?) and your are missing the this reference from the listeners variables.

And third, what is the purpose of the FooTest object? Nowhere in there do I see anything that calls a fire method.


It seems that if you fix my second point, you could simply do this to set and dispatch an event:
function onFire(first, second) {
    console.log("FIRE!!! " + first + " - " + second);
}

eventManager = new EventManager();
eventManager.addListener(onFire, "fire");
eventManager.dispatchEvent('fire', ["Number 1", "Number 2"]);


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1