Eventi personalizzati in jQuery?



Answers

Il link fornito nella risposta accettata mostra un buon modo per implementare il sistema pub / sub usando jQuery, ma ho trovato il codice un po 'difficile da leggere, quindi ecco la mia versione semplificata del codice:

http://jsfiddle.net/tFw89/5/

$(document).on('testEvent', function(e, eventInfo) { 
  subscribers = $('.subscribers-testEvent');
  subscribers.trigger('testEventHandler', [eventInfo]);
});

$('#myButton').on('click', function() {
  $(document).trigger('testEvent', [1011]);
});

$('#notifier1').on('testEventHandler', function(e, eventInfo) { 
  alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});

$('#notifier2').on('testEventHandler', function(e, eventInfo) { 
  alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});
Question

Sto cercando alcuni suggerimenti su come implementare il customhandling in jquery nel modo migliore. So come collegare eventi dagli elementi dom come 'click' etc, ma sto costruendo una piccola libreria / plugin javascript per gestire alcune funzionalità di anteprima.

Ho uno script in esecuzione per aggiornare del testo in un elemento dom da un insieme di regole e dati / input utente che ho ottenuto, ma ora ho bisogno che lo stesso testo sia mostrato in altri elementi che questo script non può sapere. Quello di cui ho bisogno è un buon modello per osservare in qualche modo questo script che produce il testo necessario.

Quindi come faccio? Ho trascurato alcune funzionalità incorporate in jquery per aumentare / gestire gli eventi utente o ho bisogno di qualche plugin jQuery per farlo? Quale pensi che sia il modo migliore / plugin per gestire questo?




Ecco come autore eventi personalizzati:

var event = jQuery.Event('customEventName);
$(element).trigger(event);

Certo, potresti semplicemente farlo

$(element).trigger('eventname');

Ma il modo in cui ho scritto ti permette di rilevare se l'utente ha impedito o meno l'impostazione predefinita

var prevented = event.isDefaultPrevented();

Ciò consente di ascoltare la richiesta dell'utente finale di interrompere l'elaborazione di un particolare evento, ad esempio se si fa clic su un elemento del pulsante in un modulo ma non si desidera che il modulo venga pubblicato in caso di errore.

Di solito ascolto gli eventi in questo modo

$(element).off('eventname.namespace').on('eventname.namespace', function () {
    ...
});

Ancora una volta, puoi farlo

$(element).on('eventname', function () {
    ...
});

Ma ho sempre trovato questo in qualche modo pericoloso, specialmente se lavori in una squadra.

Non c'è niente di sbagliato in quanto segue:

$(element).on('eventname', function () {});

Tuttavia, supponiamo di aver bisogno di dissipare questo evento per qualsiasi motivo (immagina un pulsante disabilitato). Dovrei quindi fare

$(element).off('eventname', function () {});

Questo rimuoverà tutti eventname eventi eventname da $(element) . Non puoi sapere se qualcuno in futuro vincolerà un evento a quell'elemento, e inavvertitamente ti saresti legato anche a quell'evento

Il modo più sicuro per evitarlo è quello di creare un namespace per i tuoi eventi

$(element).on('eventname.namespace', function () {});

Infine, potresti aver notato che la prima linea era

$(element).off('eventname.namespace').on('eventname.namespace', ...)

Personalmente, lego sempre un evento prima di legarlo solo per assicurarmi che lo stesso gestore di eventi non venga mai chiamato più volte (immagina che questo sia stato il pulsante di invio su un modulo di pagamento e che l'evento sia stato associato 5 volte)




Ho avuto una domanda simile, ma in realtà cercavo una risposta diversa; Sto cercando di creare un evento personalizzato. Ad esempio invece di dire sempre questo:

$('#myInput').keydown(function(ev) {
    if (ev.which == 13) {
        ev.preventDefault();
        // Do some stuff that handles the enter key
    }
});

Voglio abbreviare questo a questo:

$('#myInput').enterKey(function() {
    // Do some stuff that handles the enter key
});

trigger e binding non raccontano tutta la storia - questo è un plugin JQuery. http://docs.jquery.com/Plugins/Authoring

La funzione "enterKey" viene allegata come proprietà a jQuery.fn - questo è il codice richiesto:

(function($){
    $('body').on('keydown', 'input', function(ev) {
        if (ev.which == 13) {
            var enterEv = $.extend({}, ev, { type: 'enterKey' });
            return $(ev.target).trigger(enterEv);
        }
    });

    $.fn.enterKey = function(selector, data, fn) {
        return this.on('enterKey', selector, data, fn);
    };
})(jQuery);

http://jsfiddle.net/b9chris/CkvuJ/4/

Una buona parte di quanto sopra è che puoi gestire l'input da tastiera con garbo sugli ascoltatori di link come:

$('a.button').on('click enterKey', function(ev) {
    ev.preventDefault();
    ...
});

Modifiche: aggiornate per trasmettere correttamente this contesto al gestore e per restituire qualsiasi valore di ritorno dal gestore a jQuery (ad esempio nel caso in cui si volesse annullare l'evento e il bubbling). Aggiornato per passare un oggetto evento jQuery appropriato ai gestori, incluso il codice chiave e la possibilità di annullare l'evento.

Old jsfiddle: http://jsfiddle.net/b9chris/VwEb9/24/




Links