Differenza tra .on (‘click’) vs .click ()

C’è qualche differenza tra il seguente codice?

$('#whatever').on('click', function() { /* your code here */ }); 

e

 $('#whatever').click(function() { /* your code here */ }); 

Penso che la differenza sia nei modelli di utilizzo.

Preferirei fare .on su .click perché il primo può utilizzare meno memoria e lavorare per gli elementi aggiunti dynamicmente.

Considera il seguente codice HTML:

   

dove aggiungiamo nuovi pulsanti tramite

 $("button#add").click(function() { var html = ""; $("button.alert:last").parent().append(html); }); 

e voglio “Alert!” per mostrare un avviso. Possiamo usare “click” o “on” per quello.


Quando usiamo il click

 $("button.alert").click(function() { alert(1); }); 

con quanto sopra, viene creato un gestore separato per ogni singolo elemento che corrisponde al selettore. Questo significa

  1. molti elementi di corrispondenza creerebbero molti gestori identici e quindi aumenterebbero l’impronta della memoria
  2. gli oggetti aggiunti dynamicmente non avranno il gestore – cioè, nella html sopra la nuova aggiunta “Alert!” i pulsanti non funzioneranno a meno che non si ricolleghi al gestore.

Quando usiamo .on

 $("div#container").on('click', 'button.alert', function() { alert(1); }); 

con quanto sopra, un singolo gestore per tutti gli elementi che corrispondono al tuo selettore, compresi quelli creati dynamicmente.


… un altro motivo per usare .on

Come commentato da Adrien in basso, un altro motivo per usare .on sono gli eventi con nomi.

Se aggiungi un gestore con .on("click", handler) lo rimuovi normalmente con .off("click", handler) che rimuoverà quel gestore. Ovviamente questo funziona solo se hai un riferimento alla funzione, quindi cosa succede se non lo fai? Usa gli spazi dei nomi:

 $("#element").on("click.someNamespace", function() { console.log("anonymous!"); }); 

con unbinding via

 $("#element").off("click.someNamespace"); 

C’è qualche differenza tra il seguente codice?

No, non vi è alcuna differenza funzionale tra i due esempi di codice nella tua domanda. .click(fn) è un “metodo di scelta rapida” per .on("click", fn) . Dalla documentazione per .on() :

Esistono metodi abbreviati per alcuni eventi come .click() che possono essere utilizzati per colbind o triggersre gestori di eventi. Per un elenco completo dei metodi abbreviati, vedere la categoria degli eventi .

Nota che .on() differisce da .click() in quanto ha la capacità di creare gestori di eventi delegati passando un parametro selector , mentre .click() no. Quando viene chiamato .on() senza parametro selector , si comporta esattamente come .click() . Se si desidera la delega degli eventi, utilizzare .on() .

.on() è il metodo consigliato per eseguire tutti i binding degli eventi da jQuery 1.7. .bind() tutte le funzionalità di .bind() e .live() in una funzione che altera il comportamento quando si passano parametri diversi.

Come hai scritto il tuo esempio, non c’è differenza tra i due. Entrambi #whatever un gestore all’evento click di #whatever . on() offre una maggiore flessibilità nel consentire #whatever di debind eventi licenziati da bambini di #whatever a una singola funzione di gestore, se si sceglie.

 // Bind to all links inside #whatever, even new ones created later. $('#whatever').on('click', 'a', function() { ... }); 

Come menzionato dalle altre risposte:

 $("#whatever").click(function(){ }); // is just a shortcut for $("#whatever").on("click", function(){ }) 

Notando però che .on() supporta parecchie altre combinazioni di parametri che .click() non consente di gestire la delega degli eventi ( .delegate() e .live() ).

(E ovviamente ci sono altri metodi di scelta rapida simili per “keyup”, “focus”, ecc.)

Il motivo per cui sto inviando una risposta in più è quello di dire cosa succede se chiami .click() senza parametri:

 $("#whatever").click(); // is a shortcut for $("#whatever").trigger("click"); 

Notando che se usi direttamente .trigger() puoi anche passare parametri extra o un object evento jQuery, cosa che non puoi fare con .click() .

Volevo anche menzionare che se guardi il codice sorgente di jQuery (in jquery-1.7.1.js) vedrai che internamente la funzione .click() (o .keyup() , ecc.) .keyup() effettivamente .on() o .trigger() . Ovviamente questo significa che puoi essere sicuro che hanno lo stesso risultato, ma significa anche che usare .click() ha un po ‘più di overhead – non c’è nulla di cui preoccuparsi o anche solo pensare nella maggior parte delle circostanze, ma in teoria potrebbe essere importante in circostanze straordinarie.

EDIT: Infine, nota che .on() ti permette di associare diversi eventi alla stessa funzione in una riga, ad esempio:

 $("#whatever").on("click keypress focus", function(){}); 

No, non c’è.
Il punto di on() è i suoi altri overload e la capacità di gestire eventi che non hanno metodi di scelta rapida.

Sembrano essere gli stessi … Documentazione dalla funzione click () :

Questo metodo è una scorciatoia per .bind (‘click’, gestore)

Documentazione dalla funzione on () :

A partire da jQuery 1.7, il metodo .on () fornisce tutte le funzionalità richieste per il collegamento di gestori di eventi. Per assistenza nella conversione da vecchi metodi di evento jQuery, vedere .bind (), .delegate () e .live (). Per rimuovere eventi associati a .on (), vedere .off ().

.click eventi .click funzionano solo quando l’elemento viene sottoposto a rendering e sono collegati solo agli elementi caricati quando il DOM è pronto.

.on eventi sono collegati dynamicmente agli elementi DOM, che è utile quando si desidera albind un evento agli elementi DOM che sono sottoposti a rendering su una richiesta Ajax o qualcos’altro (dopo che il DOM è pronto).

Qui otterrai una lista di modi diversi di applicare l’evento click. È ansible selezionare di conseguenza come propria o se si fa clic non funziona, basta provare un’alternativa a questi.

 $('.clickHere').click(function(){ // this is flat click. this event will be attatched //to element if element is available in //dom at the time when JS loaded. // do your stuff }); $('.clickHere').on('click', function(){ // same as first one // do your stuff }) $(document).on('click', '.clickHere', function(){ // this is diffrent type // of click. The click will be registered on document when JS // loaded and will delegate to the '.clickHere ' element. This is // called event delegation // do your stuff }); $('body').on('click', '.clickHere', function(){ // This is same as 3rd // point. Here we used body instead of document/ // do your stuff }); $('.clickHere').off().on('click', function(){ // // deregister event listener if any and register the event again. This // prevents the duplicate event resistration on same element. // do your stuff }) 

Per quanto imparato da Internet e alcuni amici .on () viene utilizzato quando si aggiungono gli elementi in modo dinamico. Ma quando l’ho usato in una semplice pagina di accesso in cui l’evento click dovrebbe inviare AJAX a node.js e alla fine aggiungere nuovi elementi ha iniziato a chiamare le chiamate multi-AJAX. Quando l’ho cambiato in click () tutto è andato bene. In realtà non ho affrontato questo problema prima.

$ (‘. UPDATE’). Click (function () {}); V / S $ (document) .on (‘click’, ‘. UPDATE’, function () {});

[inserisci la descrizione dell’immagine qui] [10]