jQuery中未绑定到DOM元素的自定义事件？

Question

我很好奇是否可以在 jQuery 中创建一个未绑定到 DOM 元素的自定义事件。

我更喜欢 jQuery 而不是 YUI，但在 YUI 中我喜欢一件事，那就是创建自定义事件并能够在以后订阅它们。

例如，这会创建一个绑定到变量而不是 DOM 元素的事件：

var myevent = new YAHOO.util.CustomEvent("mycustomevent");

我为 jQuery 阅读的所有示例和文档都需要类似以下内容：

$('body').bind('mycustomevent', function(){
    //do stuff
});

Answer 1

您可以在 jQuery 中像这样触发自定义全局事件：

jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]);

这些将触发任何元素。

由于 jQuery 是围绕 DOM 对象构建的，因此您必须将事件绑定到 DOM 对象。您可能也可以找到某种方法来绑定没有元素的事件（您确实做到了），但这不是受支持的方法。

正如您在自己的答案中所写，如果您不想将事件绑定到单个页面元素，则可以将其绑定到全局 DOM 对象：

$(document).bind('mycustomevent', function (e, arg1, arg2, arg3) { /* ... */ });

Answer 2

根据a comment by John Resig，支持通过jQuery绑定事件到自定义对象：

没有特别的原因说明它没有被记录（除了它对大多数用户来说相当非传统） - 但是是的，我们支持它并对其进行单元测试。

所以这行得通：

var a = {foo: 'bar'};
$(a).on('baz', function() {console.log('hello')});
$(a).triggerHandler('baz');
>>> 'hello'

大多数用户需要triggerHandler()，而不是trigger()。如果使用.trigger("eventName")，它将在对象上查找“eventName”属性，并在执行任何附加的jQuery 处理程序后尝试执行它（Source）。

编辑（2017 年 2 月 28 日）：

在大型代码库中使用这种模式大约 2 年之后，我可以证明这是一个坏主意。这些自定义事件会导致难以理解的数据流。更喜欢回调。

Answer 3

对于未来的读者来说，这样做相当简单。在发布我的问题后，我做了进一步的研究。不幸的是，其他评论者都不正确。

为了绑定自定义事件：

$().bind('mycustomevent', function(){
    //code here
});

此外，您可以将数据构建到稍后可访问的事件对象中：

$({mydata:'testdata'}).bind('mycustomevent',function(){
    //code here
});

Answer 4

在 jQuery 1.4.4 中已移除与非 dom 元素的绑定。

Answer 5

您仍然可以使用 jQuery 任意触发和响应事件，即使您不知道要将它们附加到哪个元素。只需在您的文档中创建一个“接收者”元素，您可以将所有自定义事件绑定到该元素。这使您可以在一个地方为所有非特定于元素的事件管理事件处理逻辑。

$(document).ready(function() {

  $(body).append('<div id="receiver">');

  $("#receiver").bind("foo_event", function () {
    // decide what to do now that foo_event has been triggered.
  });

  $("#some_element").click(function() {
    $("#receiver").trigger("foo_event");
  });

});

Answer 6

jQuery Callbacks 提供了一种实现独立于 DOM 的发布-订阅系统的简单方法。

链接页面底部附近的示例代码显示了如何执行此操作。

Answer 7

[编辑]

这是一个使用以下概念的工作类：

https://github.com/stratboy/image-preloader

它只是一个顺序图像预加载器。您可以订阅一堆事件。看看吧。

[/编辑]

旧帖：

这是另一个准系统示例，其中包含 Himanshu P 建议的回调。

我正在构建一个类，我来自 Mootools，其中类和直接在类中实现的自定义事件（因此不绑定到 DOM 元素）是绝对自然的。所以我尝试了一种解决方法并在下面分享。

  var step_slider;

  //sandbox
  ;(function($) {

//constructor
var StepSlider = function(slider_mask_selector,options) {

    //this.onStep = $.Event('step');
    this.options = null;
    this.onstep = $.Callbacks();

    this.init();
}//end constructor

StepSlider.prototype = {

    init:function(){
        this.set_events();
    },//end init

    set_events:function(){

        if(this.options){
            if(this.options.onstep){
                this.subscribe('step',options.onstep);
            }
        }

    },//set_events

    subscribe:function(event,action){
        this['on'+event].add(action);
    },

    fire_onstep:function(){
        this.onstep.fire({ data1:'ok' });
    }

}//end prototype/class

//--------------------

$(document).ready(function() {

    step_slider = new StepSlider('selector');

    //for example, say that you have a div#next-button, you can then do this:
    $('#next-button').click(function(){
        step_slider.fire_onstep();
    });

});//end domready


})(jQuery);