blocks|key|1433926|text|您可以在jQuery中触发如下自定义全局事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1433927|jQuery.event.trigger('mycustomevent',+[arg1,+arg2,+arg3]);|code-block|syntax|javascript|1433928|这些将在任何元素上触发。|1433929|由于jQuery是围绕DOM对象构建的，因此您必须将事件绑定到DOM对象。您可能也可以找到一些方法来绑定没有元素的事件(您确实做到了)，但这不是一种受支持的方法。|1433930|正如您在自己的答案中所写的，如果您不想将事件绑定到单个页面元素，则可以将事件绑定到全局DOM对象：|1433931|$(document).bind('mycustomevent',+function+(e,+arg1,+arg2,+arg3)+{+/*+...+*/+});|1433932|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can trigger custom global events like this in jQuery:

<pre><code>jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]);
</code></pre>

These will trigger for any element.

Since jQuery is built around DOM objects, you have to bind your events to DOM objects. You can probably find some way to bind events without an element too (you did), but that's not a supported methodology.

As you wrote in your own answer, you can bind your event to a global DOM object if you don't want to bind it to an individual page element:

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

blocks|key|1433973|text|对于未来的读者来说，这样做是相当简单的。在发布了我的问题后，我做了进一步的研究。不幸的是，其他评论者没有一个是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1433974|要绑定自定义事件：|1433975|$().bind('mycustomevent',+function(){
++++//code+here
});|code-block|syntax|javascript|1433976|此外，您还可以将数据构建到稍后可访问的事件对象中：|1433977|$({mydata:'testdata'}).bind('mycustomevent',function(){
++++//code+here
});|1433978|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For future readers, its fairly simple to do this. I did further research after posting my question. Unfortunately none of the other commenters were correct.

In order to bind a custom event:

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

Also, you can build data into the event object that is later accessible:

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

blocks|key|1219199|text|在jQuery+1.4.4中删除了对非dom元素的绑定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1219200|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Binding to non-dom elements has been removed in jQuery 1.4.4.

blocks|key|1219188|text|您仍然可以使用jQuery任意触发和响应事件，即使您不知道将它们附加到哪个元素。只需在您的文档中创建一个"receiver“元素，您可以将所有自定义事件绑定到该元素上。这允许您在一个地方管理所有非特定于元素的事件的事件处理逻辑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1219189|$(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");
++});

});|code-block|syntax|javascript|1219190|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can still arbitrarily trigger and respond to events using jQuery, even if you don't know what element to attach them to. Just create a "receiver" element in your document, to which you can bind all your custom events. This allows you to manage your event handling logic in one place, for all your non-element-specific events.

<pre><code>$(document).ready(function() {

 $(body).append('&lt;div id="receiver"&gt;');

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

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

});
</code></pre>

blocks|key|1434125|text|jQuery+Callbacks提供了一种简单的方法来实现独立于DOM的发布-订阅系统。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1434126|在链接页面的底部附近是示例代码，演示了如何做到这一点。|1434127|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.Callbacks/^0|7|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

jQuery <a href="http://api.jquery.com/jQuery.Callbacks/" rel="nofollow">Callbacks</a> provides a simple way to implement a pub-sub system independent of the DOM.

Near the bottom of the linked page is example code that shows how to do that.

blocks|key|1434224|text|编辑|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1434225|下面是一个使用下面编写的概念的工作类：|1434226|https://github.com/stratboy/image-preloader|offset|length|1434227|它只是一个顺序图像预加载器。你可以订阅一系列的活动。瞧一瞧。|1434228|/EDIT|1434229|旧帖子：|1434230|这是另一个带有回调的基本示例，类似于Himanshu+P.|1434231|我正在构建一个类，我来自Mootools，在Mootools中，类和直接在类中实现的自定义事件(因此不绑定到DOM元素)是非常自然的。因此，我尝试了一种变通方法，并在下面分享。|1434232|++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'%2Bevent].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);|code-block|syntax|javascript|1434233|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|17|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@$F|16|G|17|1|18]]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1D|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1E|8|@]|9|@]|A|$U|V]]|$1|W|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|E]]]]

[EDIT]

Here's a working class that uses the concepts written below:

<a href="https://github.com/stratboy/image-preloader" rel="nofollow">https://github.com/stratboy/image-preloader</a>

It's just a sequential image preloader. You can subscribe to a bunch of events. Take a look.

[/EDIT]

Old post:

Here's another barebones example with callbacks like suggested by Himanshu P. 

I'm building a class and I come from Mootools, where things like Classes and custom events directly implemented in classes (so not bound to DOM elements) are absolutely natural. So I tried a sort of workaround and share below.

<pre><code> 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);
</code></pre>

I'm curious if its possible to create a custom event in jQuery that isn't bound to a DOM element.

I greatly prefer jQuery to YUI but there is one thing in YUI that I like, which is creating custom events and being able to subscribe to them later.

For example, this creates an event that is bound to a variable, not to a DOM element:

<pre><code>var myevent = new YAHOO.util.CustomEvent("mycustomevent");
</code></pre>

All of the examples and documentation I have been reading for jQuery require something like:

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

Custom event in jQuery that isn't bound to a DOM element?

jQuery

我很好奇是否可以在jQuery中创建一个不绑定到DOM元素的自定义事件。与YUI相比，我更喜欢jQuery，但YUI中有一件事是我喜欢的，那就是创建自定义事件，并能够在以后订阅它们。例如，这会创建一个绑定到变量而不是DOM元素的事件：var myevent = new YAHOO.util.CustomEvent("mycustomevent");我一直在阅读的所有jQuery示例和文档都需要类似

问没有绑定到DOM元素的jQuery中的自定义事件？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有绑定到DOM元素的jQuery中的自定义事件？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有绑定到DOM元素的jQuery中的自定义事件？
EN