Differenza tra le funzioni .on() chiamate

Question

Qual è la differenza tra quanto segue?

$(document).on("scroll",".wrapper1", function(){ 
    $(".wrapper2") 
    .scrollLeft($(".wrapper1").scrollLeft()); 
}); 

$('.wrapper1').on("scroll", function(){ 
     $(".wrapper2") 
      .scrollLeft($(".wrapper1").scrollLeft()); 
}); 

Quando utilizzare correttamente tutte le funzioni?

Answer 1

La differenza tra questi due sono

$('.wrapper1').on("scroll", ....) lega l'evento di scorrimento ai soli elementi che sono presenti al momento della esecuzione di questa istruzione, cioè se si aggiunge alcun nuovo elemento con classe wrapper1 dinamicamente dopo questa affermazione è eseguito quindi il gestore dell'evento non verrà eseguito per questi elementi.

$(document).on("scroll",".wrapper1", ...) invece registrerà un gestore di eventi all'oggetto document e farà uso di bubbling degli eventi per richiamare il gestore ogniqualvolta scorrimento avviene all'interno di un elemento con classe `wrapper``, quindi sosterrà dinamica aggiunta di elementi .

Così, quando a preferire un metodo

si può preferire primo metodo se si dispone di un numero limitato di elementi e non sono aggiunto dinamicamente

Preferisco il secondo metodo se si dispone di molti elementi o questi gli elementi vengono aggiunti dinamicamente.

Answer 2

La differenza è nel primo caso che il listener ha come target il documento, quindi se non si dispone di .wrapper1 sulla pagina e lo si aggiunge in aggiunta (AJAX o in qualche altro modo) l'evento verrà comunque attivato (dal documento è sempre lì).

Nel secondo caso se .wrapper1 viene aggiunto dinamicamente l'evento non si attiva, anche se si pensa che si stia utilizzando .on() poiché non si dispone di un elemento per associare tale .on() a.

Questa seconda variante deve essere utilizzata solo quando l'elemento selezionato non viene creato dinamicamente e il primo nel caso opposto.

Answer 3

L'effetto sarà lo stesso, ma il modo in cui il gestore di eventi sta avendo l'evento consegnato è leggermente diverso.

Si sta utilizzando .on() in ogni caso, ma il selettore non viene utilizzato nella seconda versione. L'evento è delegato nel primo caso ed è direttamente associato nel secondo.Gli stati .on() documentazione:

Per diretti eventi,

gestore viene chiamato ogni volta che un evento si verifica sugli elementi selezionati, sia che avviene direttamente sull'elemento o bolle da un elemento discendente (interno)

Per delegato eventi,

Il conduttore non viene chiamato quando si verifica l'evento direttamente sull'elemento bound, ma solo per discendenti (elementi interni) che corrispondono al selettore

Cosa accade è quando un evento viene rilevato dal browser che bolle il DOM. JQuery chiamerà i gestori di eventi che sono stati allegati a ogni elemento durante la navigazione. Nella prima versione l'evento si propaga fino a document prima che jQuery controlli se l'evento sia stato creato in un elemento class="wrapper1". La seconda versione, l'evento smetterebbe di ribollire prima se l'evento era su un elemento class="wrapper1".

L'altra differenza è che la prima versione sarà ancora in grado di legare il gestore eventi se .wrapper1non esiste quando la pagina ha terminato il caricamento, vale a dire se l'elemento si aggiunge dinamicamente la seconda versione non funzionerà. Quando la pagina viene caricata e il jQuery eseguito $('.wrapper1') potrebbe non esistere.

Se gli elementi .wrapper1 non sono dinamici, probabilmente si troverà un vantaggio di prestazioni (trascurabile) sull'utilizzo della seconda versione.

Tutto questo a parte, il scroll event does not bubble e non può essere delegato. Tuttavia, possono essere delegati Anche in questo caso dalla documentazione .on():

in tutti i browser, gli eventi di carico, di scorrimento, e di errore (ad esempio, su un elemento) non lo fanno bolla. In Internet Explorer 8 e versioni precedenti, gli eventi Incolla e Reimposta non vengono visualizzati. Tali eventi non sono supportati per l'uso con la delega, ma possono essere utilizzati quando il gestore eventi è direttamente collegato all'elemento che genera l'evento.

Quindi l'unica versione che avrebbe funzionato è la seconda! See demo nella console DevTools l'output document scroll non viene mai visualizzato.