Hvordan fungerer inline Javascript (i HTML)?

Jeg vet at dette er dårlig praksis. Ikke skriv kode slik hvis det overhodet er mulig.

Selvfølgelig vil vi alltid befinne oss i situasjoner hvor et smart lite stykke inline Javascript kan løse et problem raskt.

Jeg følger opp denne forespørselen i interesse av å fullt ut forstå hva som skjer (og de potensielle fallgruvene) når noe slikt blir skrevet:

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

Så vidt jeg kan se er dette funksjonelt det samme som

<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>

Hvis man ekstrapolerer fra dette, ser det ut til at strengen som er tildelt attributtet onclick settes inn i en anonym funksjon som tildeles elementets klikkbehandler. Er dette faktisk tilfelle?

Fordi jeg begynner å gjøre ting som dette:

<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! -->

Som fungerer. Men jeg vet ikke hvor mye av en klype dette er. Det ser mistenkelig ut fordi det ikke er noen åpenbar funksjon som blir returnert fra!

Du kan spørre, hvorfor gjør du dette, Steve? Innebygd JS er dårlig praksis!

Vel, for å være helt ærlig er jeg lei av å redigere tre forskjellige kodeseksjoner bare for å endre én del av en side, spesielt når jeg bare lager en prototype for å se om det i det hele tatt vil fungere. Det er så mye enklere, og noen ganger gir det til og med mening at koden som spesifikt tilhører dette HTML-elementet, defineres rett i elementet: Når jeg bestemmer meg 2 minutter senere for at dette var en forferdelig, forferdelig idé, kan jeg slette hele div-en (eller hva det måtte være), og jeg har ikke en haug med mystisk JS- og CSS-rusk som henger rundt i resten av siden og bremser gjengivelsen bare litt. Dette ligner på konseptet med lokalitetsreferanse, men i stedet for cache-misses ser vi på feil og kodeoppblåsing.

Svar #1

Du har det nesten riktig, men du har ikke tatt hensyn til this-verdien som gis til inline-koden.

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

er faktisk nærmere:

<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>

Inline hendelseshåndterere setter this lik målet for hendelsen. Du kan også bruke anonyme funksjoner i inline-skript.

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

Svar #2

Hva nettleseren gjør når du har

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

er å sette den faktiske verdien av "onclick" til noe som effektivt er som:

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

Det vil si, det oppretter en funksjon som forventer en "event"-parameter. (Vel, IE gjør det ikke; det er mer som en enkel anonym funksjon.)

Svar #3

Det ser ut til å være mye dårlig praksis som kastes rundt hendelsesbehandlerattributter. Dårlig praksis er å ikke kjenne til og bruke tilgjengelige funksjoner der det er mest hensiktsmessig. Hendelsesattributtene er fullstendig dokumenterte standarder fra W3C, og det er ingenting dårlig praksis med dem. Det er ikke annerledes enn å plassere inline-stiler, som også er dokumentert av W3C og kan være nyttig til tider. Enten du plasserer det innpakket i script-tagger eller ikke, vil det bli tolket på samme måte.

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

Relaterte artikler