jQuery - Quando legare gli ascoltatori di eventi?

Question

jQuery - Quando legare gli ascoltatori di eventi?

#1 da (5 voti)
#2 da (1 voti)
#3 da (1 voti)

4

Sto creando un'applicazione JavaScript "a pagina singola" di medie dimensioni con jQuery. Se includi tutte le possibili funzionalità dell'applicazione, sono presenti il 134% di associazioniclick.

Poiché la maggior parte del contenuto è caricata dinamicamente, non posso fare questo:

$(element).click(function() { ... });

Invece, sto facendo questo:

$(document).on('click', selector, function() { ... });

Al momento, impaccio tutti questi dati su $(document).ready . Ma è una cattiva pratica? Si tratta di un problema di velocità?

L'alternativa sarebbe quella di associare i listener di eventi ogni volta che viene caricato il contenuto, ad esempio:

$('#content').html(...);
$('#newcontent').click(function() { ... });

Il problema con questo è difficile da organizzare. Che consiglio puoi darmi?

javascript event-programming jquery

posta musicnothing 05.05.2014 - 18:25

fonte

3 risposte

1

Credo che tu stia facendo il modo preferito (usando on ).

Nessun lavoro reale viene eseguito a $ (document) .ready ... stai solo dicendo "legami a qualsiasi evento click da qualsiasi elemento figlio che bolle nel documento".

Da una prospettiva perfetta, mi limito ad assicurarmi che il tuo selettore sia efficiente.

La documentazione ( link ) mostra l'associazione al livello <body> anziché al documento, ma potrebbe essere trascurabile.

risposta data 05.05.2014 - 20:54

fonte

1

Ciò che è meglio fare in realtà dipende dai dettagli dell'applicazione e varierà a seconda delle specifiche di ciascuna applicazione.

Trovo più semplice seguire la logica di un'applicazione con un singolo:

$(top).on('click', selector, function() { ... });

piuttosto che scoprire che varie parti dell'applicazione aggiungono gestori man mano che aggiornano la parte della pagina di cui sono responsabili. Nota Ho usato top piuttosto che document , perché (come sottolineato da user12415) è preferibile utilizzare un elemento che è solo ampio quanto necessario piuttosto che document stesso.

In alcuni casi, provare ad aggiungere direttamente i gestori direttamente agli elementi piuttosto che utilizzare la delega può causare un notevole impatto sulle prestazioni o richiedere un accoppiamento più strong tra le parti rispetto a ciò che è desiderabile. Ho un'applicazione di modifica in cui utilizzo la delega per gestire tutti gli eventi di clic sui collegamenti ipertestuali. Questa applicazione ha un core di editing che fornisce la funzionalità di base ma utilizza le modalità per modificare il comportamento di modifica in base a quali dati vengono modificati. Ad esempio, una modalità potrebbe fornire una funzionalità per trasformare tutte le istanze di una parola in un collegamento ipertestuale alla stessa parola in Wikipedia. Il core non può prevedere come una modalità cambierà il documento. Quindi, senza delega, il core dovrebbe controllare la ogni trasformazione per vedere se ha aggiunto un collegamento ipertestuale, che è costoso. Una modalità può trasformare il testo normale in collegamenti ipertestuali quando il testo viene digitato. Quindi, ciò significherebbe eseguire il controllo di ogni tasto . Molto costoso! O la modalità dovrebbe avere un modo per dire al core che ha aggiunto al documento qualcosa a cui il core è interessato. Questo è soggetto a errori. ("Oops! Ho dimenticato di dirlo al core.") La delega è l'opzione sensata qui.

risposta data 07.05.2014 - 18:54

fonte

Leggi altre domande sui tag javascript event-programming jquery

Un modulo utilizzato dalla maggior parte degli altri moduli Buone abbreviazioni per XML ... cose

score 5 · Accepted Answer

Otterrai un leggero aumento delle prestazioni se vincerai gli eventi più vicino agli obiettivi. Come è ora, ogni elemento all'interno del documento viene controllato per vedere se corrisponde al "selettore". Ad esempio, se la tua pagina è organizzata in questo modo:

<div id="container">
   <div id="content">...</div>
</div>

Sarebbe meglio riscrivere

$(document).on('click', selector, function() { ... });

come

$("#container").on('click', selector, function() { ... });

Avresti la stessa convenienza di non dover ricollegare gli eventi, ma gli eventi di azione sarebbero limitati a "#container". Un'altra cosa da considerare con il collegamento degli eventi a $ (documento) è che se nuovi elementi vengono aggiunti altrove nella pagina con lo stesso selettore, non dovrai preoccuparti che assumano comportamenti indesiderati.