Ci sono casi in cui devi utilizzare l'attributo di evento early-binding / inline in HTML / JavaScript

Question

Nella mia risposta alla seguente domanda SO: Che cosa significa associazione di eventi? , ho fatto un'osservazione di passaggio chel'uso di JavaScript inline / Early-Binding per associare eventi JavaScript era "spesso fuorviante"

Ad esempio:

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

Stavo sostenendo l'approccio di "associazione tardiva" in cui non è presente alcun riferimento JavaScript nel markup, che ritengo sia una best practice stabilita.Tuttavia, i commentatori hanno affermato che c'erano occasioni che ne richiedevano l'uso e mi chiedevo quali potessero essere.

Senza impegnarsi in una discussione sui relativi meriti di nessuno dei due, qualcuno può pensare a qualsiasi circostanza che imponga di utilizzare l'attributo onclick (ad es.) su un approccio di associazione tardiva.

Molte grazie

Answer 1

Penso che molti sviluppatori lo faranno per ignoranza o mancanza di conoscenza (che è, ovviamente, comune) e gli sviluppatori rimanenti lo faranno perché è semplicemente più conveniente usare gli attributi HTML-JS rispetto al binding tardivo, se sai che certi oggetti e funzioni sono sempre caricati su ogni pagina e semplicemente "saranno lì".

Penso che questo sia specialmente vero quando detto HTML proviene da una richiamata AJAX. Prendiamo un esempio in cui una richiesta AJAX ritorna con una risposta HTML e quell'HTML viene inserito nella pagina. Ora lo sviluppatore ingenuo penserebbe in questo modo:

• Non ho idea di quali elementi ci siano all'interno dell'HTML di risposta, quindi non so quali binding tardivi devo aggiungere.
• Forse dovrei aggiungerli tutti per ogni evenienza! O scrivere qualche script di analisi che rilevi gli elementi e si colleghi a quelli che trovo?
• Ma cosa succede se ho bisogno di legarmi a qualcosa che non esiste già? È ora di scrivere un lungo JavaScript in linea!

Tutto ciò può essere eliminato utilizzando una sorta di associazione onnipresente che si applica a tutti gli elementi e futuri presenti nella pagina. In jQuery, l'equivalente è live() . Invece di scrivere:

$('.foo').click(function(){...});

Potresti scrivere:

$('.foo').live('click', function(){...});

Ora, tutti gli elementi con nome di classe "pippo" eseguiranno la funzione quando cliccati, inclusi gli elementi che attualmente non esistono . Molto utile per le interfacce AJAX dinamiche.

Potresti già saperlo, ma sto solo sottolineando che tutto ciò che gli attributi JS possono fare, il JS puro può fare di meglio e considererei questa best practice.

Answer 2

i commentatori hanno affermato che c'erano occasioni che ne rendevano necessario l'uso

Suppongo di essere uno di quei commentatori. Quello che ho effettivamente detto è che gli ascoltatori in linea " sono un'opzione ragionevole in determinate circostanze ". Non credo che ci siano casi in cui sia "necessario" (che in questo contesto intendo significare obbligatorio).

L'aggiunta di listener in linea significa semplicemente applicare la stessa logica sul server per aggiungere listener come verrebbe applicata sul client e presenta vantaggi in quanto:

1. Il markup può essere creato e memorizzato nella cache o utilizzato come pagine statiche, i listener non vengono aggiunti da ogni client più e più volte quando le pagine vengono scaricate
2. I problemi relativi al ritardo tra la disponibilità dell'elemento e l'aggiunta del listener da parte di DOMReady o funzioni di onload o "script in basso" sono stati completamente rimossi
3. I capricci delle varie funzioni DOMReady "cross browser" con fallback onload vengono rimossi: non è possibile che tali funzioni non riescano ad aggiungere listener se non vengono utilizzate

Ovviamente questo non significa che tutti gli ascoltatori debbano essere aggiunti in linea e che l'aggiunta dinamica di ascoltatori sia spazzatura, sto solo facendo notare che è un metodo praticabile che risolve alcuni problemi ed è una soluzione perfettamente ragionevole in molti casi.

Se ritieni che il "binding anticipato" degli ascoltatori sia buono, fallo il prima possibile - inseriscili in linea. :-)

PS. Penso anche di aver detto che non mi piaceva l'uso di "binding" in questo contesto in quanto gli ascoltatori non sono legati agli elementi in alcun senso reale. Sono semplicemente funzioni che vengono chiamate quando un elemento riceve un evento correlato. L'unico tipo di associazione è che la parola chiave this dell'ascoltatore può essere impostata per fare riferimento all'elemento correlato (che è coerente in tutti i browser per i listener in linea ma non necessariamente per quelli aggiunti in seguito).

Answer 3

Motivi per cui gli attributi onclick non sono validi:

onclick="foo()"

• Il tuo passaggio in una stringa di codice che viene visualizzata in fase di esecuzione quando si fa clic sull'elemento.Questo è inefficiente e utilizza gli orrori di eval
• Sei obbligato a memorizzare la funzione foo in ambito globale inquinando così l'ambito globale con tutta la logica di gestione degli eventi.