Özel jQuery olayı window.document için nasıl işaretlenir?

Question

Kesinlikle konumlandırılmış bir açılır menü yazdım. Bu harika çalışıyor

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

hedeflediğim için ps.DropDown hangi örneği bildiğinde:

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

Ancak, benim özel etkinliği için istiyorum bu menü açtığında ben özel bir etkinlik tetikleme am Olay yayılmadan durdurulmamışsa window.document'e kadar kabarcık yapın. Örneğin:

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! 
}); 

Bunu jQuery ile gerçekleştirmenin herhangi bir yolu var mı?

DÜZENLEME bir olayı tetikleyecektir benzetme

bir düğme elemanı üzerine bir tıklama ile bir örnek ekleyin. Bu olay, ana öğe zincirini window.document (yayılma bir olay dinleyicisi tarafından durdurulmadığı sürece) alana kadar kabarmaya devam edecektir. Bu davranışları, event.stopPropagation() çağrılmıyorsa, window.document (veya $ .event veya global olarak başka bir pencere, önemli değil) için kabarcık oluşturacak şekilde özel olaylar için sentezlemekle ilgileniyorum

Answer 1

Sana .event.trigger elle $ arayarak aradığınız düşünüyorum:

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

son parametre kullanılır "onlyHandlers" bayrağı için, bu durumda, öğe işleyicilerini tetiklemek ve her üst düğümde yeniden tetiklemek istediğimizde false. Bu şekilde, "myCustomEvent" öğesini, bu olayın ortaya çıktığı pencere ve düğüm arasındaki herhangi bir şeye bağlayabilirsiniz.

Answer 2

belirli bir referans olmadan küresel özel etkinlikleri gerekiyorsa

, ben her yerde DropDown hakkında hiçbir şey bilmeden sayfa Şimdi

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

o etkinliğe dinleyebilirsiniz gövdesini olayları tetiklemek

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

window.document hiçbir zaman etkinlik olarak kullanılmadı Hedef.

Answer 3

Bir DOM öğesinden özel olayları tetiklemek için gerekli değil:

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

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