如何将事件侦听器附加到 javascript var答案

【问题标题】：How to attach an event listener to a javascript var如何将事件侦听器附加到 javascript var
【发布时间】：2013-07-24 09:08:33
【问题描述】：

我是一个有点绿色的程序员，对 javascript/jquery 还很陌生，但我认为我了解 javascript 事件。显然不是。我无法让事件侦听器按我的意愿工作。

给定javascript：

var Thing = {
    //stuff
    update: function() {
        $.event.trigger({type:'stateUpdate', more:stuff});
    }
};

var Room = {
    //more stuff
    updateHandler: function (e) {
        //handle event here
    }
};

如果我做 jquery：

$(document).on('stateUpdate', $Room.updateHandler);

然后它工作正常，但我不能这样做

$(Room).on('stateUpdate', $Room.updateHandler);

或

Room.addEventListerner('stateUpdate', $Room.updateHandler);

第一个什么都不做，第二个给出 .addEventListerner is not a function 错误。

我已经用谷歌搜索了几个小时，但无法弄清楚。我发现 .addEventListener 仅适用于实现 EventListener 的对象、有关 handleEvent 的内容以及有关自动实现 EventListener 的函数的内容。没有关于如何使对象实现它的信息。有没有办法将侦听器添加到不是函数的 javascript 对象？我是否必须创建一个事件处理程序对象，或者使用“文档”或“窗口”并让它调用处理程序？这看起来真的很丑。

对象首先应该是函数吗？那行得通吗？似乎目前的观点是，让所有东西都能正常工作只是试图让 javascript 变成它不是的东西。

【问题讨论】：

how to add an eventListener to an Object in javascript which will fire when object is manipulated?的可能重复
事件监听器仅用于 DOM 元素，而不是任意 Javascript 对象。有关详细信息，请参阅链接的问题。
我想这不是闻所未闻的行为。除了听众之外，有没有“正确”的方式来做这件事？（最好是促进模块化，即稍后添加更多的“房间”，而“东西”编辑最少或没有）除了直接调用“东西”更新函数之外，我能想到的只有不可见的 DOM 中介，这样的 DOM 对象是不好的做法吗？
通常的方法是使用函数和方法调用。除了与处理 DOM 事件的方式保持一致之外，我看不出通过将其表达为事件可以获得什么。
哦，呵呵。你的意思是让“房间”注册一个带有“东西”的回调以进行更新，对吧？我认为这将为我解决所有问题。

标签： javascript jquery custom-events

【解决方案1】：

AFAIK 无法将事件侦听器添加到普通对象，因为它没有放置在 DOM 中。事件在 DOM 中触发，并且冒泡，因此您的自定义对象的事件侦听器不会接收到它。

有一个http://www.bobjs.com/ 框架可以帮助您实现自定义事件。

【讨论】：

【解决方案2】：

作为对@Barmar（有点）的回应，我相信我已经解决了这个问题。不过，确认这是否是一个好的替代方案会很好。基本上，我必须做订阅者的事情，对吧？几乎是事件/侦听器，但不完全是。

var thing = {
    callbacks: {},
    regCallback: function (key, which) {
        callbacks[key] = which;
    },
    remCallback: function (key) {
        callbacks[key].delete;
    }
    update: function(e) {
        for(var i = 0, len = callbacks.length; i < len;i++){
            callbacks[i](e);
        };
    }
};

var Room = {
    updateHandler: function () {
        //handle stuff
    },
    subscribe: function (which, callback) {
        which.regCallback('room', callback);
    }
    unsub: function (which) {
        which.remCallback('room');
    }
};

//wherever/whenever I need to get updates something like
Room.subscribe(thing, Room.updateHandler);
//unsub
Room.unsub(thing);

【讨论】：

【解决方案3】：

第二个错误是由拼写错误引起的：addEventListerner 中有额外的r。

【讨论】：