Come funziona Javascript inline (in HTML)?

So che questa è una cattiva pratica. Non scrivere codice come questo, se possibile.

Naturalmente, ci troveremo sempre in situazioni in cui un frammento intelligente di Javascript inline può risolvere rapidamente un problema.

Sto perseguendo questa domanda nell'interesse di comprendere appieno cosa succede (e le potenziali insidie) quando viene scritto qualcosa del genere:

<a href="#" onclick="alert('Hi')">Click Me</a>

Per quanto posso dire questo è funzionalmente uguale a

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

Estrapolando da ciò sembra che la stringa assegnata all'attributo onclicksia inserita all'interno di una funzione anonima assegnata al gestore di clic dell'elemento. È davvero così?

Perché sto iniziando a fare cose del genere:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

Che funziona Ma non so quanto sia un hack questo. Sembra sospetto perché non vi è alcuna funzione apparente che viene restituita!

Potresti chiedere, perché lo stai facendo, Steve? Inline JS è una cattiva pratica!

Beh, ad essere sincero, sono stanco di modificare tre diverse sezioni di codice solo per modificare una sezione di una pagina, specialmente quando sto solo prototipando qualcosa per vedere se funzionerà affatto. È molto più semplice e talvolta ha persino senso che il codice specificamente correlato a questo elemento HTML sia definito proprio all'interno dell'elemento: quando decido 2 minuti più tardi che questa è stata un'idea terribile e terribile, posso annusare l'intero div (o qualunque cosa ) e non ho un mucchio di misteriose cruft JS e CSS in giro nel resto della pagina, che rallentano leggermente il rendering. Questo è simile al concetto di località di riferimento, ma invece di errori nella cache stiamo osservando bug e code bloat.

Hai quasi ragione, ma non hai tenuto conto del thisvalore fornito al codice inline.

<a href="#" onclick="alert(this)">Click Me</a>

è in realtà più vicino a:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

I gestori di eventi inline impostati sono thisuguali al target dell'evento. Puoi anche usare la funzione anonima nello script inline

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Cosa fa il browser quando hai

<a onclick="alert('Hi');" ... >

consiste nell'impostare il valore effettivo di "onclick" su qualcosa come:

new Function("event", "alert('Hi');");

Cioè, crea una funzione che prevede un parametro "evento". (Beh, IE no; è più come una semplice funzione anonima semplice.)

Sembra che ci siano molte cattive pratiche lanciate attorno agli attributi del gestore eventi. La cattiva pratica non è conoscere e utilizzare le funzionalità disponibili dove è più appropriato. Gli attributi degli eventi sono standard completamente documentati dal W3C e non vi è nulla di negativo. Non è diverso dal posizionare stili in linea, che è anche documentato W3C e può essere utile in tempi. Che tu lo inserisca avvolto in tag script o meno, verrà interpretato allo stesso modo.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

Il modo migliore per rispondere alla tua domanda è vederlo in azione.

<a id="test" onclick="alert('test')"> test </a> ​

Nel js

var test = document.getElementById('test');
console.log( test.onclick ); 

Come vedi in console, se stai usando Chrome, stampa una funzione anonima con l'oggetto evento passato, anche se è un po 'diverso in IE.

function onclick(event) {
   alert('test')
}

Concordo con alcuni dei tuoi punti sui gestori di eventi inline. Sì, sono facili da scrivere, ma non sono d'accordo con il tuo punto di dover cambiare codice in più punti, se strutturi bene il tuo codice, non dovresti aver bisogno di farlo.

Sembra sospetto perché non vi è alcuna funzione apparente che viene restituita!

È una funzione anonima che è stata associata all'evento click dell'oggetto.

perché lo stai facendo, Steve?

Perché diavolo stai facendo ..... Ah non importa, come hai già detto, è davvero una cattiva pratica ampiamente adottata :)

Prova questo nella console:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

In Chrome, mostra questo:

function onclick(event) {
  alert(event)
}

... e la nameproprietà non standard di div.onclickis "onclick".

Quindi, se questo è anonimo dipende dalla tua definizione di "anonimo". Confronta con qualcosa di simile var foo = new Function(), dove si foo.nametrova una stringa vuota, e foo.toString()produrrà qualcosa di simile

function anonymous() {

}