Question

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 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 help me take this to the point where addListener and dispatchEvent are functional.

[code]

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


[/code]
[code]
    <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>
[/code]

Answer 1

Here’s a working example of fixed code: http://jsfiddle.net/JxYca/3/

For the most part your code was working, just a few small problems here and there. IFFE is Immediately-Invoked Function Expression (IIFE). This is what you were doing with the whole function(window) {}(window). However in this case it’s absolutely unnecessary and just pollutes the code. There’s no such thing as hashtable in javascript, however, you can just use an object instead of it. The names of the properties become a key and their value is now value of the hashtable.

An additional and sort of unrelated though for you. This way of doing events in nice, but if you have, say, 3 handlers attached to an event, and second one fails with JavaScript exception, third one will never get executed. You might want to take a quick look at how prototype.js does events here: https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js Their events are non-blocking.