javascript - How to bubble custom jQuery event to window.document? - Stack Overflow

admin管理员组

文章数量:1345139

I have written an absolutely positioned drop-down menu. I am triggering a custom event when this menu opens:

ps.DropDown.prototype._onOpenComplete = function() {
    $(this).trigger('MENU_OPEN', [this]);
}

This works great when I know which instance of ps.DropDown to target:

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', fn);

However, I would like for my custom event to bubble up to window.document if the event is not stopped from propagating. For example:

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', function(event, instance) {
    // this would stop bubbling to $(window.document)
    // event.stopPropagation();
});
$(window.document).on('MENU_OPEN', function(event, instance) {
    // bubbled!
});

Is there any way to acplish this with jQuery?

EDIT to add a example by analogy

A click on a button element will trigger an event. This event will continue to bubble up the parent-element chain until it reaches window.document (unless propagation is stopped by an event listener). I am interested in synthesizing this behavior for custom events such that if event.stopPropagation() is not called, it will bubble to window.document (or $.event, or some other window global, it doesn't matter)

I have written an absolutely positioned drop-down menu. I am triggering a custom event when this menu opens:

ps.DropDown.prototype._onOpenComplete = function() {
    $(this).trigger('MENU_OPEN', [this]);
}

This works great when I know which instance of ps.DropDown to target:

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', fn);

However, I would like for my custom event to bubble up to window.document if the event is not stopped from propagating. For example:

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', function(event, instance) {
    // this would stop bubbling to $(window.document)
    // event.stopPropagation();
});
$(window.document).on('MENU_OPEN', function(event, instance) {
    // bubbled!
});

Is there any way to acplish this with jQuery?

EDIT to add a example by analogy

A click on a button element will trigger an event. This event will continue to bubble up the parent-element chain until it reaches window.document (unless propagation is stopped by an event listener). I am interested in synthesizing this behavior for custom events such that if event.stopPropagation() is not called, it will bubble to window.document (or $.event, or some other window global, it doesn't matter)

• javascript
• jquery
• events

Share Improve this question Follow edited Feb 6, 2016 at 19:15 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Feb 14, 2012 at 2:11 thesmartthesmart 3,07322 gold badges3333 silver badges3434 bronze badges 2

• Your code looks fine whoever have have subscribe to MENU_OPEN event should be triggered with .trigger('MENU_OPEN). – ShankarSangoli Commented Feb 14, 2012 at 2:48
• 1 Yes, but I'm looking for a solution that doesn't require a reference to an instance of ps.DropDown. I want the event to bubble to window.document. – thesmart Commented Feb 14, 2012 at 5:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 12

I think you're looking for calling $.event.trigger manually:

$.event.trigger('myCustomEvent', someDataObj, someDomElement, false);

The last parameter is used for the "onlyHandlers" flag, false in this case as we want to trigger the elements handlers and then trigger again on each parentNode. In this fashion you can bind "myCustomEvent" to anything in between the window and the node where this event originated.

if I need custom events globally without a specific reference, I trigger the events on the body of the page

$('body').trigger('MENU_OPEN', [this]);

Now you can listen to that event anywhere without knowing anything about your DropDown

$('body').on('MENU_OPEN',function(event, dropDown){
    // bubbled
});

Never used the window.document as an event target.

It's not neccessary to trigger custom events from a DOM element:

$(window.document).bind('dropDownHasOpened', function() {
   console.log($(this));
   // 'this' is window.document 
});

ps.DropDown.prototype._onOpenComplete = function() {
  $.event.trigger('dropDownHasOpened');
}

本文标签： javascriptHow to bubble custom jQuery event to windowdocumentStack Overflow