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

问题描述

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

jsfiddle

  var iSubmit = {
 addEventListener：document.addEventListener || document.attachEvent，
 dispatchEvent：document.dispatchEvent，
 fireEvent：document.fireEvent，
 
 
 //为了完整性而添加下面的方法，问题。 
 
 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）; 
 
 
 //添加此调用以进行完整测试。错误已经在此线之前触发。 
 
 iSubmit.test（）; 
  

这将返回一个错误：无法添加eventlisterens：TypeError：'addEventListener '调用一个没有实现接口EventTarget的对象。

现在这个代码将用于phonegap应用程序，它是工作在android / ios。在测试期间，如果我可以让它在至少一个浏览器工作将是很好。

PS>我知道可以启用冒泡，然后听文档根，但我想只有一点点OOP，每个对象可以自己工作。

解决方案

addEventListener 用于实现特定事件相关接口的DOM元素。如果您想在纯JavaScript对象上创建事件系统，事件系统，一个例子将是Backbone.js中的 Backbone.Events 。基本的想法是使用一个对象作为哈希来跟踪注册的回调。

我个人使用： https://github.com/component/emitter p>

这是一个相当简单和优雅的解决方案 - 使用简短的方法名称 on（）， off（）和 emit（）。您可以使用 new Emitter（）创建新实例，也可以使用 Emitter（obj）对象。注意，这个库是为使用CommonJS模块系统而编写的，但是你可以通过删除 module.exports = ... 行在任何其他地方使用它。

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 perfom 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 is 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.

解决方案

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.

Personally I use this: https://github.com/component/emitter

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屋！