Question

var test = { }
$(test).on("testEvent", function (){
    console.log("testEvent has fired");
});
$.event.trigger("testEvent");

我正在尝试使用jQuery来使用事件来执行发布/订阅机制。我需要能够将事件附加到非DOM对象，并且能够从一个全局触发器中激活它们。我希望上面的代码可以工作，但它不会导致测试对象的testEvent触发。

请注意，将有多个对象订阅事件。单个$ .event.trigger应该触发所有这些事件。

请注意，此代码可以正常运行：

$('#someID').on("testEvent", function () {
console.log('testEvent has fired from DOM element');
})
$.event.trigger("testEvent");

Answer 1

在做了一些研究后，似乎jQuery 1.7提供了一种引入发布/订阅机制的简单方法。（找到here）为了拥有发布/订阅机制，可以使用以下代码：

(function ($, window, undefined) {
    var topics = {};

    jQuery.Topic = function (id) {
        var callbacks, method, topic = id && topics[id];
        if (!topic) {
            callbacks = jQuery.Callbacks();
            topic = {
                publish: callbacks.fire,
                subscribe: callbacks.add,
                unsubscribe: callbacks.remove
            };
            if (id) {
                topics[id] = topic;
            }
        }
        return topic;
    };
})

要订阅活动，请完成以下操作：

$.Topic("message").subscribe(function () {
    console.log("a publish has occurred");
});

为了发布消息，完成以下操作：

$.Topic( "message" ).publish(data);

“消息”是事件名称。 data参数包含要传递给订阅者的任何信息。

为了取消订阅，您必须传递已订阅的功能：

$.Topic( "message" ).unsubscribe(funcSubscribedToBefore);

Answer 2

在现代浏览器中（如果我read the source for Underscore.js正确）允许您将事件本地绑定到非DOM对象。否则，你将不得不使用像下划线的.bind函数。所以这取决于你需要支持哪些浏览器。

<击> 编辑：

好的，没关系，我认为Underscore.js中的bind与Backbone相同。 Backbone有它自己的事件模块，显然可以进行事件绑定。

binding events to dynamic objects in underscore/backbone

Answer 3

我最近使用过Ben Alman的方法，效果很好！

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

(function ($) {

    var o = $({});

    $.subscribe = function () {
        o.on.apply(o, arguments);
    };

    $.unsubscribe = function () {
        o.off.apply(o, arguments);
    };

    $.publish = function () {
        o.trigger.apply(o, arguments);
    };

}(jQuery));

用法：

$.subscribe('eventName', function (event) {
    console.log(event.value);
});

$.publish({ type: 'eventName', value: 'hello world' });

有关详细信息，请参阅https://gist.github.com/addyosmani/1321768。

$ .event.trigger不在非DOM对象中触发

3 个答案: