我想知道是否可以在jQuery中创建一个不绑定到DOM元素的自定义事件。
我非常喜欢jQuery而不是YUI，但是在YUI中有一件事情我很喜欢，那就是创建自定义事件并且稍后能够订阅它们。
例如，下面的代码创建了一个与变量绑定而不是DOM元素绑定的事件：
var myevent = new YAHOO.util.CustomEvent("mycustomevent");
我一直在阅读关于jQuery的例子和文档，它们都需要类似以下的代码：
$('body').bind('mycustomevent', function(){
//do stuff
});
jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]);
这些将触发任何元素。
由于jQuery是围绕DOM对象构建的，因此您必须将事件绑定到DOM对象。您可能会找到一些方法来绑定事件而不使用元素（您确实做了），但这不是受支持的方法。
正如您在自己的答案中所写的那样，如果您不想将事件绑定到单个页面元素，则可以将其绑定到全局DOM对象上：
$(document).bind('mycustomevent', function (e, arg1, arg2, arg3) { /* ... */ });
triggerHandler 解决方法已经在问题 7930 中得到修复。 - hyperslug根据John Resig的评论，通过jQuery将事件绑定到自定义对象是被支持的：
没有什么特别的原因不去记录它（除了对于大多数用户来说它非常不传统），但是是的，我们支持它并且有单元测试。
所以这个可以工作：
var a = {foo: 'bar'};
$(a).on('baz', function() {console.log('hello')});
$(a).triggerHandler('baz');
>>> 'hello'
大多数用户需要使用triggerHandler()而不是trigger()。如果使用.trigger("eventName")，它将查找对象上的“eventName”属性，并尝试在执行任何附加的jQuery处理程序之后执行它（源）。
编辑（28.02.2017）：
在一个大型代码库中使用此模式约2年后，我可以证明这是一个坏主意。这些自定义事件导致了难以理解的数据流。最好使用回调函数。
针对未来的读者，这是相当简单的。在发布问题后，我进行了进一步的研究。不幸的是，其他评论者都不正确。
为了绑定自定义事件：
$().bind('mycustomevent', function(){
//code here
});
$({mydata:'testdata'}).bind('mycustomevent',function(){
//code here
});
$()仍然会将其绑定到DOM对象（$()等同于执行$(document)）。$({})是可行的，但你应该知道它之所以有效，是因为jQuery从不检查是否为DOM对象。它仍然将其包装为一个拥有方法（例如append(...)）的jQuery对象，如果调用这些方法会停止你的脚本。而且，对非DOM对象进行包装的行为是未定义的，并且可能会在未来发生变化。因此，我仍然坚持我的观点，并建议您将其绑定到$(document)而不是JavaScript对象。 - Blixt在jQuery 1.4.4中，绑定非DOM元素的功能已被移除。
即使您不知道要将事件附加到哪个元素，仍然可以使用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");
});
});
$('body') 或者 $(document) 呢？ - Blixt[编辑]
以下是使用下面概念的工作类：
https://github.com/stratboy/image-preloader
这只是一个顺序图像预加载器。您可以订阅一系列事件。看一下。 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);
bind(myevent,.. - jantimon