Zdarzenie niestandardowe w jQuery, które nie jest powiązane z elementem DOM?

Question

Jestem ciekawy, czy możliwe jest utworzenie niestandardowego zdarzenia w jQuery, które nie jest powiązane z elementem DOM.

Znacznie preferuję jQuery do YUI, ale jest coś w YUI, które lubię, które tworzy niestandardowe wydarzenia i możliwość subskrybowania ich później.

Na przykład ten tworzy zdarzenie, które jest związany do zmiennej, a nie do elementu DOM:

var myevent = new YAHOO.util.CustomEvent("mycustomevent"); 

Wszystkie przykłady i dokumentacji Czytałem dla jQuery wymagać czegoś takiego:

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

Answer 1

można wywołać niestandardowych globalnych wydarzeń, takich jak ten w jQuery:

jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]); 

Spowoduje to uruchomienie dowolnego elementu.

Ponieważ jQuery jest zbudowany wokół obiektów DOM, musisz powiązać swoje zdarzenia z obiektami DOM. Prawdopodobnie możesz znaleźć sposób na powiązanie zdarzeń bez elementu (Ty to zrobiłeś), ale to nie jest obsługiwana metodologia.

Jak napisał w swoim własnym odpowiedź, można powiązać swoje wydarzenie do globalnej obiektu DOM, jeśli nie chcesz powiązać go z pojedynczego elementu strony:

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

Answer 2

dla przyszłych czytelników, jego dość proste do zrobienia. Po opublikowaniu mojego pytania zrobiłem dalsze badania. Niestety żaden z pozostałych komentatorów nie był poprawny.

W celu związania niestandardowe zdarzenie:

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

Ponadto, można zbudować danych do obiektu zdarzenia, który jest później dostępne:

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

Answer 3

Można nadal arbitralnie wyzwalać i reagować na zdarzenia przy użyciu jQuery, nawet jeśli nie wiesz, do którego elementu należy je dołączyć. Po prostu utwórz w dokumencie element "odbiorcy", do którego możesz powiązać wszystkie niestandardowe zdarzenia. Pozwala to zarządzać logiką obsługi zdarzeń w jednym miejscu, dla wszystkich zdarzeń niezwiązanych z elementem.

$(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"); 
    }); 

}); 

Answer 4

Wiązanie z elementami innymi niż dom zostało usunięte w jQuery 1.4.4.

Answer 5

jQuery Callbacks zapewnia prosty sposób wdrożenia systemu pub-sub niezależnego od DOM.

W dolnej części połączonej strony znajduje się przykład kodu, który pokazuje, jak to zrobić.

Answer 6

[EDIT]

Oto klasa robotnicza, która używa pojęcia napisane poniżej:

https://github.com/stratboy/image-preloader

To tylko kolejny obraz preloader. Możesz zapisać się na kilka wydarzeń. Spójrz.

[/ EDIT]

Stary post:

Oto kolejny przykład z Barebone callbacków jak sugeruje Himanshu P.

Buduję klasę i pochodzę Mootools, gdzie takie rzeczy jak Klasy i zdarzenia niestandardowe bezpośrednio zaimplementowane w klasach (niezwiązane z elementami DOM) są całkowicie naturalne. Tak więc spróbowałem obejść i udostępnić poniżej. rozwiązywane są

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

Answer 7

Według a comment by John Resig, wiążące zdarzenia do niestandardowych obiektów poprzez jQuery:

bez konkretnego powodu, dlaczego nie jest to udokumentowane (inne niż to raczej nietradycyjny dla większości użytkowników) - ale tak, wspieramy to i mamy dla niego testy jednostkowe.

Tak to działa:

var a = {foo: 'bar'}; 
$(a).on('baz', function() {console.log('hello')}); 
$(a).triggerHandler('baz'); 
>>> 'hello' 

Większość użytkowników będzie musiał triggerHandler() nie trigger(). Jeśli zostanie użyty .trigger("eventName"), będzie szukał właściwości "eventName" na obiekcie i spróbuje wykonać ją po wykonaniu wszystkich dołączonych procedur obsługi jQuery (Source).

EDIT (28.02.2017):

Po użyciu tego wzorca przez około 2 lata w dużym kodzie, mogę potwierdzić, że jest to zły pomysł. Te niestandardowe zdarzenia prowadzą do niezrozumiałych przepływów danych. Zamiast tego preferuj wywołania zwrotne.