.bind () vs. .on () di jQuery

Ho trovato due grandi articoli che parlano della nuova funzione .on(): jquery4u.com , elijahmanor.com .

C'è un modo in cui .bind()è ancora meglio usare ancora .on()?

Ad esempio, ho un codice di esempio che assomiglia a questo:

$("#container").click( function( e ) {} )

Puoi notare che ho solo un elemento recuperato dal selettore e, nel mio caso, il <div>nome #containeresiste già quando la mia pagina è stata caricata; non aggiunto dinamicamente. È importante ricordare che utilizzo l'ultima versione di jQuery: 1.7.2.

Per quel campione, dovrebbe .on()essere usato invece che .bind()anche se non utilizzo le altre funzionalità fornite dalla .on()funzione?

Internamente, .bindesegue il mapping direttamente alla .onversione corrente di jQuery. (Lo stesso vale per .live.) Quindi c'è un piccolo ma praticamente insignificante successo se si utilizza .bindinvece.

Tuttavia, .bindpuò essere rimosso dalle versioni future in qualsiasi momento. Non vi è alcun motivo per continuare a utilizzare .binde ogni motivo per preferire .oninvece.

Tutti questi frammenti eseguono esattamente la stessa cosa:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Tuttavia, sono molto diversi da questi, che svolgono tutti la stessa cosa:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Il secondo set di gestori di eventi utilizza la delega degli eventi e funzionerà per gli elementi aggiunti dinamicamente. I gestori di eventi che utilizzano la delega sono anche molto più performanti. Il primo set non funzionerà con elementi aggiunti dinamicamente e sono molto peggio per le prestazioni.

La on()funzione di jQuery non introduce alcuna nuova funzionalità che non esisteva già, è solo un tentativo di standardizzare la gestione degli eventi in jQuery (non è più necessario decidere tra live, bind o delegate).

I metodi diretti e .delegatesono API superiori .one non vi è alcuna intenzione di deprecarle.

I metodi diretti sono preferibili perché il codice verrà digitato in modo meno rigoroso. Riceverai un errore immediato quando si digita male il nome di un evento anziché un bug silenzioso. A mio avviso, è anche più facile da scrivere e leggere clickcheon("click"

Il .delegateè superiore a .oncausa della fine della discussione:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Sai subito che è delegato perché, beh, dice delegato. Puoi anche vedere immediatamente il selettore.

Con .onnon è immediatamente chiaro se è anche delegato e devi cercare il selettore alla fine:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Ora, la denominazione di .bindè davvero terribile e ha un valore nominale peggiore di .on. Ma .delegatenon è possibile fare eventi non delegati e ci sono eventi che non hanno un metodo diretto, quindi in rari casi come questo potrebbero essere utilizzati ma solo perché si desidera fare una netta separazione tra eventi delegati e non delegati.

Se cerchi il codice sorgente $.fn.bind, scoprirai che è solo una funzione di riscrittura per on:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Dalla documentazione di jQuery:

A partire da jQuery 1.7, il metodo .on () è il metodo preferito per associare i gestori di eventi a un documento. Per le versioni precedenti, il metodo .bind () viene utilizzato per collegare un gestore eventi direttamente agli elementi. I gestori sono collegati agli elementi attualmente selezionati nell'oggetto jQuery, quindi tali elementi devono esistere nel punto in cui si verifica la chiamata a .bind (). Per un'associazione di eventi più flessibile, vedere la discussione della delega di eventi in .on () o .delegate ().

http://api.jquery.com/bind/

A partire da Jquery 3.0 e versioni successive .bind è stato deprecato e preferisce invece utilizzare .on. Come @Blazemonger ha risposto in precedenza che potrebbe essere rimosso ed è sicuro che verrà rimosso. Per le versioni precedenti, .bind chiamerebbe anche .on internamente e non c'è alcuna differenza tra di loro. Vedi anche l'API per maggiori dettagli.

Documentazione API jQuery per .bind ()