自定义对象上的 addEventListener [英] addEventListener on custom object

问题描述

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

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

这将返回一个错误:无法添加事件监听器:TypeError:在未实现接口 EventTarget 的对象上调用了'addEventListener'."

现在此代码将用于 phonegap 应用程序，当我这样做时，它可以在 android/ios 上运行.然而，在测试期间，如果我能让它在至少一个浏览器中工作就太好了.

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> 我知道我可以启用冒泡，然后监听文档根目录，但我想要一点点 OOP，让每个对象都可以独立工作.

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.

推荐答案

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

addEventListener is intended for DOM Elements that implements certain event-related interfaces. If you want an event system on pure JavaScript objects, you are looking for a custom event system. An example would be Backbone.Events in Backbone.js. The basic idea is using an object as a hash to keep track of registered callbacks.

我个人使用这个:发射器.

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

It's a fairly simple and elegant solution - with sweet short method names like on(), off() and emit(). you can either create new instances with new Emitter(), or use Emitter(obj) to mix event capabilities into existing objects. Note this library is written for use with a CommonJS module system, but you can use it anywhere else by removing the module.exports = ... line.

这篇关于自定义对象上的 addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！