jQuery ascoltare a livello globale per evento personalizzato

Question

Una versione semplificata di quello che sto cercando di fare è la seguente:

var indication = $('#some-div'); 
indication.bind('custom-event', function() { ... } 


// ... later on! 

function OtherThing() { 
    $(this).trigger('custom-event'); 
} 

mi piacerebbe indication.bind('custom-event') per ricevere il grilletto dal function OtherThing senza i due dover conoscere in modo esplicito su l'un l'altro. È possibile? La mia unica soluzione finora è di legare sia l'ascoltatore che l'evento al corpo ... questo sembra sciatto - c'è un modo migliore?

Answer 1

In JavaScripts, gli eventi attivati ​​su ciascun elemento HTML vengono propagati ai relativi genitori, quindi, per risolvere il problema e rendere qualsiasi elemento in grado di gestire l'evento personalizzato senza fare qualcosa di sbagliato come $('*').bind('custom-event') è quello di associare l'ascoltatore a un genitore comune per tutti gli elementi, i body o html elementi:]

Quindi, avete solo bisogno di legare l'evento a body o html elemento. Quindi, quando un elemento, all'interno dell'elemento genitore scelto, attiva l'evento personalizzato, verrà propagato a questo elemento padre.

E poi, nel gestore di eventi, è possibile accedere l'elemento che ha innescato l'evento accedendo attributo target per l'oggetto evento: event.target

Quindi, il codice dovrebbe essere:

$('body').bind('custom-event', function(e){ 
    var $element = e.target; 
}); 

$('#anyElement').trigger('custom-event');