I've created an object that has several methods. Some of these methods are asynchronous and thus I want to use events to be able to perform actions when the methods are done. To do this I tried to add the addEventListener to the object.

jsfiddle

var iSubmit = {

    addEventListener: document.addEventListener || document.attachEvent,

    dispatchEvent: document.dispatchEvent,

    fireEvent: document.fireEvent,   





    //the method below is added for completeness, but is not causing the problem.



    test: function(memo) {

        var name = test;

        var event;

        if (document.createEvent) {

            event = document.createEvent(HTMLEvents);

            event.initEvent(name, true, true);

        } else {

            event = document.createEventObject();

            event.eventType = name;

        }

        event.eventName = name;

        event.memo = memo || { };



        if (document.createEvent) {

            try {

                document.dispatchEvent(event);

            } catch (ex) {

                iAlert.debug(ex, 'iPushError');

            }

        } else {

            document.fireEvent(on + event.eventType, event);

        }

    }

}



iSubmit.addEventListener(test, function(e) { console.log(e); }, false);





//This call is added to have a complete test. The errors are already triggered with the line before this one.



iSubmit.test();

This will return an error: Failed to add eventlisterens: TypeError: 'addEventListener' called on an object that does not implement interface EventTarget.

Now this code will be used in a phonegap app and when I do, it is working on android/ios. During testing, however, it would be nice if I could get it to work in at least a single browser.

PS> I know I could enable bubbling and then listen to the document root, but I would like to have just a little bit OOP where each object can work on its own.