it-swarm.com.de

Wie funktioniert Inline-Javascript (in HTML)?

Ich weiß, dass dies eine schlechte Praxis ist. Schreiben Sie keinen Code wie diesen, wenn dies überhaupt möglich ist.

Natürlich befinden wir uns immer in Situationen, in denen ein cleverer Ausschnitt aus Inline-Javascript ein Problem schnell beheben kann.

Ich verfolge diese Frage im Interesse eines vollständigen Verständnisses dessen, was passiert (und der möglichen Fallstricke), wenn so etwas geschrieben wird:

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

Soweit ich das beurteilen kann ist das funktional das gleiche wie

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

Ausgehend davon scheint die dem Attribut onclick zugewiesene Zeichenfolge in eine anonyme Funktion eingefügt zu werden, die dem Klick-Handler des Elements zugewiesen ist. Ist das tatsächlich der Fall?

Weil ich anfange, Dinge wie diese zu tun:

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

Welches funktioniert. Aber ich weiß nicht, was für ein Hack das ist. Es sieht verdächtig aus, weil es keine offensichtliche Funktion gibt, von der zurückgegeben wird!

Sie könnten fragen, warum machst du das, Steve? Inline JS ist eine schlechte Praxis!

Um ganz ehrlich zu sein, habe ich es satt, drei verschiedene Codeabschnitte zu bearbeiten, um nur einen Abschnitt einer Seite zu ändern, besonders wenn ich nur einen Prototyp entwerfe, um zu sehen, ob es überhaupt funktioniert. Es ist so viel einfacher und manchmal macht es sogar Sinn, den Code speziell für dieses HTML-Element zu definieren genau innerhalb das Element: Wenn ich 2 Minuten später entscheide, dass dies eine schreckliche, schreckliche Idee war, kann ich Nuke die gesamte Div (oder was auch immer) und ich habe nicht ein paar mysteriöse JS- und CSS-Tricks im Rest der Seite herumhängen, die das Rendern etwas verlangsamen. Dies ähnelt dem Konzept der Referenzlokalität, aber anstelle von Cache-Auslassungen werden Bugs und Code-Bloat untersucht.

117
Steven Lu

Sie haben es fast richtig verstanden, aber Sie haben den this -Wert, der im Inline-Code angegeben ist, nicht berücksichtigt.

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

ist eigentlich näher an:

<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-Ereignishandler setzen this gleich dem Ziel des Ereignisses. Sie können auch anonyme Funktionen in Inline-Skripten verwenden

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

Was der Browser macht, wenn Sie haben

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

ist es, den tatsächlichen Wert von "onclick" auf so etwas wie effektiv zu setzen:

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

Das heißt, es wird eine Funktion erstellt, die einen "Ereignis" -Parameter erwartet. (Nun, IE nicht; es ist eher eine einfache anonyme Funktion.)

8
Pointy

Es scheint eine Menge schlechter Praktiken zu geben, die im Zusammenhang mit Ereignishandlerattributen auftreten. Eine schlechte Praxis besteht darin, die verfügbaren Funktionen nicht zu kennen und dort einzusetzen, wo sie am besten geeignet sind. Die Ereignisattribute sind vollständig W3C-dokumentierte Standards und es gibt nichts Schlechtes an ihnen. Es ist nicht anders als das Platzieren von Inline-Stilen. Dies ist auch W3C-dokumentiert und kann in bestimmten Zeiten nützlich sein. Egal, ob Sie es in Skript-Tags einschließen oder nicht, es wird auf die gleiche Weise interpretiert.

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

6
Daniel B

Der beste Weg, um Ihre Frage zu beantworten, ist siehe es in Aktion.

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

In der js

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

Wie Sie im console sehen, wird bei Verwendung von chrome eine anonyme Funktion mit dem übergebenen Ereignisobjekt ausgegeben, obwohl dies im IE ein wenig anders ist.

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

Ich stimme einigen Ihrer Anmerkungen zu Inline-Event-Handlern zu. Ja, sie sind einfach zu schreiben, aber ich stimme nicht mit Ihrem Standpunkt überein, dass Code an mehreren Stellen geändert werden muss. Wenn Sie Ihren Code gut strukturieren, sollten Sie dies nicht tun müssen.

4
aziz punjani

Es sieht verdächtig aus, weil es keine offensichtliche Funktion gibt, von der zurückgegeben wird!

Es ist eine anonyme Funktion, die an das Klickereignis des Objekts angehängt wurde.

warum machst du das, Steve?

Warum um alles in der Welt bist du doi ..... Ah vergiss, wie du schon erwähnt hast, es ist wirklich eine weit verbreitete schlechte Praxis :)

3
mattytommo

Versuchen Sie dies in der Konsole:

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

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

div.onclick

In Chrome zeigt es Folgendes:

function onclick(event) {
  alert(event)
}

... und die nicht standardmäßige Eigenschaft name von div.onclick ist "onclick".

Ob dies anonym ist oder nicht, hängt von Ihrer Definition von "anonym" ab. Vergleichen Sie mit etwas wie var foo = new Function(), wobei foo.name Ein leerer String ist und foo.toString() so etwas erzeugt

function anonymous() {

}
3
Dagg Nabbit