Allegare gli eventi per documentare meglio di collegarli agli elementi?

Question

Allegare gli eventi per documentare meglio di collegarli agli elementi?

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

3

Mentre rimbalzavo attorno a StackOverflow, ho notato un numero di persone che associava eventi (in particolare click eventi) a document invece che a elements .

Esempio:

Dato questo:

<button id="myButton">CLICK ME</button>

Invece di scrivere questo (usando jQuery solo per brevità):

$('#myButton').on('click', function() { ... });

Fanno questo:

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

E quindi presumibilmente usa event.target per visualizzare in dettaglio l'elemento che è stato effettivamente cliccato.

Ci sono guadagni / vantaggi nell'acquisizione di eventi al livello document invece che al livello element ?

javascript event-programming

posta Todd 20.10.2013 - 19:16

fonte

2 risposte

Leggi altre domande sui tag javascript event-programming

Double equals (Non equality) durante l'assegnazione di Java [duplicate] Algoritmo per dedurre la gerarchia dei tag

score 3 · Answer 1

C'è un vantaggio: se #myButton non è sempre nella pagina (cioè, è inserito tramite AJAX o alterando innerHTML o direttamente il DOM), quindi non c'è bisogno di ricreare il listener di eventi più e più volte .

Detto questo, non dovresti farlo a causa sia delle prestazioni che dell'offuscamento. Se questo sta accadendo sulla tua pagina, almeno metti l'evento su un elemento contenente che è sempre lì - #content o #menu o qualcosa di simile.

E anche allora, per indirizzare il codice di esempio nella tua domanda, jQuery in particolare ha la sintassi per farlo senza controllo manuale :

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

Sebbene, come ho detto sopra, è meglio limitare l'evento a dove può apparire:

$('#commentBox').on('click', '#myButton', function() { ... });

score 0 · Answer 2

Forse (e forse è un grosso problema) in alcuni casi (ancora una volta) che potrebbero (e potrebbero essere grandi) aumentare le prestazioni dell'app, anche se non posso dire perché.

Ciò che sicuramente fa è rendere il codice più difficile da leggere, dato che dovresti entrare nel callback per scoprire a quale elemento l'evento è realmente associato; e potenzialmente viola anche il principio DRY, dal momento che non è possibile riutilizzare la callback in un altro evento di elemento. Puoi certamente aggiungere un'altra clausola al tuo event.target se istruzione, ma questo potrebbe offuscare ulteriormente il codice.

Il che mi riporta alla mia prima affermazione, qualcuno deve aver pensato che potrebbe aumentare le prestazioni dell'app, poiché l'unica ragione per offuscare il codice che ha senso, è migliorare le prestazioni. Purtroppo, la maggior parte delle persone tende ad attaccare i problemi di performance laddove pensano che il problema sia, a differenza del profiling del codice e della determinazione esatta di ciò che è underperforming.

Ancora una volta, non sono sicuro che ciò migliorerebbe le prestazioni, ma sono abbastanza sicuro che offusca il codice in modo inutile, e questo è di per sé negativo, specialmente un paio di mesi dopo aver iniziato a scriverlo e tornare a modificare esso. Probabilmente il codice avrà più eventi legati a documenti con if multipli (alcuni con una clausola e alcuni con clausole n) da verificare quando si tenta di eseguire il debug di un evento.

solo i miei 2 centesimi

Modifica: Non riesco davvero a trovare una situazione in cui legare un evento al documento lo renderebbe migliore. Forse il codice che hai visto richiede l'acquisizione di un clic in qualsiasi punto del documento e l'esecuzione dello stesso codice indipendentemente da dove ha origine il clic? è l'unica ragione che trovo potrebbe giustificare fare una cosa del genere