javascript - 自定义对象上的 addEventListener

Question

我创建了一个具有多种方法的对象。其中一些方法是异步的，因此我想使用事件来在方法完成时执行操作。为此，我尝试将 addEventListener 添加到对象中。

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

这将返回错误:无法添加事件监听器:TypeError:'addEventListener' 在未实现接口(interface) EventTarget 的对象上调用。”

现在这段代码将用于 phonegap 应用程序，当我这样做时，它可以在 android/ios 上运行。但是，在测试过程中，如果我能让它至少在一个浏览器中运行，那就太好了。

PS> 我知道我可以启用冒泡，然后听取文档根目录，但我希望有一点 OOP，每个对象都可以独立工作。

Answer 1

addEventListener 适用于实现特定事件相关接口(interface)的 DOM 元素。如果你想要一个基于纯 JavaScript 对象的事件系统，你正在寻找一个自定义事件系统。一个例子是 Backbone.js 中的 Backbone.Events。基本思想是使用对象作为哈希来跟踪已注册的回调。

我个人使用这个:emitter .

这是一个相当简单和优雅的解决方案 - 带有甜美的简短方法名称，如 on()、off() 和 emit()。您可以使用 new Emitter() 创建新实例，或使用 Emitter(obj) 将事件功能混合到现有对象中。请注意，此库是为与 CommonJS 模块系统一起使用而编写的，但您可以通过删除 module.exports = ... 行在其他任何地方使用它。